Question

我有$scope中的数据，根据范围classNames计数，我需要在页面中创建包含scope不同数据的元素。怎么样？

我正在尝试添加更多no.of directive元素，但我只看到一个输出。我无法将$scope数据传递给它。

这样做的正确方法是什么？

这是我的尝试：

<div class="wrapper" ng-app="myApp">
    <div class="helloWorld" ng-controller="hello">
        <ul>
            <li ng-repeat="item in items">
                {{item.name}}
            </li>
        </ul>
        <hello-world/> //added multiple times
        <hello-world/>
        <hello-world/>
        <hello-world/>
        <hello-world/>
    </div>

</div>

var app = angular.module('myApp', []);

app.controller('hello', function ($scope) {
    $scope.items = [
        {name:'name1', className:'green'},
        {name:'name2', className:'blue'},
        {name:'name3', className:'brown'},
        {name:'name4', className:'yellow'},
        {name:'name5', className:'red'}
    ];
});

app.directive('helloWorld', function () {
        return {
            restrict: 'AE',
            replace: 'true',
            template: '<h3 class="{item.className}">Hello World!! from color of {{item.className}}</h3>',
            scope: {
              className: '@'
            },
            link : function ($scope, elem, attr) {
            }
        }
});

jsfiddle

任何人都可以帮助我理解这个概念并在这里创建多个指令实例吗？

提前致谢。

Answer 1

..我正在尝试添加更多no.of指令元素，但我只看到一个输出

首先，您需要正确关闭指令标记。使用所以<hello-world><hello-world/>代替<hello-world/>。另外，将指令放在ng-repeat中以获取多个元素。

        <li ng-repeat="item in items">
            {{item.name}}
            <hello-world class-name="{{item.className}}"></hello-world>
        </li>

我无法将$ scope数据传递给它。

这是因为您创建了一个孤立的范围＆＃39;为你的指示！

  scope: {
         className: '@'
         }

@符号表示隔离范围中的className将从指令中的属性class-name获取其值

app.directive('helloWorld', function () {
    return {
        restrict: 'E',
        replace: 'true',
        template: '<h3>Hello World!! from color of "{{className}}"</h3>',
        scope: {
            className: '@'
        },
        link: function ($scope, elem, attr) {}
    }
})

这里是dmeo

Answer 2

问题是您没有正确关闭指令。根据定义，Tag指令不能自行关闭。那么当你写<hello-world />时会发生什么呢？标签仍然是未关闭的，后续指令无法被解析。

应该是：

<hello-world></hello-world>
<hello-world></hello-world>
<hello-world></hello-world>
<hello-world></hello-world>
<hello-world></hello-world>

演示： http://jsfiddle.net/ydkezd15/2/

如何使用不同的数据创建多个`directive`实例

2 个答案: