javascript - 带有 Scope 数据数组的 AngularJS 指令

Question

我有一个数组。数组的每一项都包含指令的数据。该数组是在控制器内部创建的。

该模型

$scope.myDirectiveData = 
          [ { title: "First title", content: "First content" }, 
            { title: "Second title", content: "Second content" } ];

指令模板

<div class="MyDirective">
   <h1>{{myDirectiveData.title}}</h1>
   <p>{{myDirectiveData.content}}</p>
</div>

我应该如何实现该指令来为数组中的任何项目创建一个项目？就像是...

<MyDirective data-ng-repeat="item in myDirectiveData"></MyDirective>

Answer 1

这是一个使用指令的示例。它使用 ng-repeat 为范围内数组中的每个对象调用指令。在这个小提琴中，这就是您要寻找的东西。

http://jsfiddle.net/gLRxc/4/

angular.module('test', [])

.directive('myDirective', function () {
    var template = '<div class="MyDirective">' +
        '<h1>{{ data.title }}</h1>' +
        '<p>{{ data.content }}</p>' +
        '</div>';
    return {
        template: template,
        scope: {
            data: '='
        },
        link: function (scope, element, attrs) {

        }

    };
})

.controller('TestController', function ($scope) {

    $scope.myDirectiveData = [
            { title: "First title", content: "First content" },
            { title: "Second title", content: "Second content" }
        ];


})
;

已编辑 Html：ng-repeat 与您的问题所述的指令位于同一行。

<div ng-app="test" ng-controller="TestController">
     <div my-directive data="item" ng-repeat="item in myDirectiveData"></div>
</div>

Answer 2

<div ng-repeat="item in myDirectiveData">
  <h1>{{item.title}}</h1>
  <p>{{item.content}}</p>
</div>