AngularJS - Unable to pass value from HTML to directive

Question

I am trying to create a directive so i dont have to repeat a set of HTML 10+ times.

Here's the original HTML:

<div class="abc">
    <div class="xyz">
        <div class="something">
            <div class="hello">
                <ul class="list">
                    <li ng-repeat="myData in Data.Info | filter:{ SectionID: 4 } | filter:{ Message: '!!' }">
                        <span ng-class="{'1': 'red', '2': 'blue'}[myData.MessageImage]"></span>
                        {[{ myData.Message }]}
                    </li>
                </ul>
            </div>
        </div>
        <div class="l">
            <div class="nop">
                <ul class="change">
                    <li ng-repeat="myData in Data.Info | filter:{ SectionID: 4 } | filter:{ Message: '!!' }">
                        <span ng-class="{'1': 'down', '2': 'up'}[myData.MessageImage]"></span>                              
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

My directive:

app.directive('myNewDirective', function () {
    return {
        restrict: 'E',
        replace: 'true',
        scope: {
                SectionID: '='
         },
        template:'<div>' +
                    '<span ng-class="{\'1\': \'red\', \'2\': \'blue\'}[myData.MessageImage]"></span>' +
                    '{[{ myData.Message }]}' +
                  '</div>',

        link: function(scope, element, attrs) {           

            console.log("scope = " + scope);
            console.log("scope.SectionID = " + scope.SectionID);            

        }


    };
});

Here's how i tried calling my new directive:

<div my-new-directive SectionID="4">

However in my console.log, scope.SectionID = undefined

And hence why i have not stated the ng-repeat in my directive template.

cuttlas · Accepted Answer · 2014-07-18 08:37:20Z

1

Like you did with the directive name, the attribute section-id in the HTML must be snake-case while the attribute sectionId in the directive must be camelCase.

answered Jul 18, 2014 at 8:37

cuttlas

9816 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oam Psy Over a year ago

Thanks for pointing that out, the problem is, SectionID is a node within my JSON file, hence why i am passing it to my directive as SectionID="4"

Collectives™ on Stack Overflow

AngularJS - Unable to pass value from HTML to directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related