Question

我正在尝试创建一个指令，所以我不必重复一组HTML 10次以上。

这是原始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>

我的指示：

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);            

        }


    };
});

这是我如何尝试调用我的新指令：

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

但是在我的console.log中，scope.SectionID = undefined

因此我没有在我的指令模板中说明ng-repeat。

Answer 1

与使用指令名称一样，HTML中的属性section-id必须是snake-case，而指令中的属性sectionId必须是camelCase。

AngularJS - 无法将值从HTML传递到指令

1 个答案: