javascript - 将父指令模板中的值传递给子指令

Question

问题:

我试图将一个值从 ng-repeat 传递到子指令，但是当我尝试访问我在指令 2 中传递的变量时，我得到“未定义”。

这是我正在尝试的示例。基本上，指令 1 代表一组小部件，而 指令 2 代表单个小部件。我正在尝试将一个项目从 ng-repeat 循环传递到我的子指令中。

我的尝试:

这是我的指令 1 模板的简化版本:

<li ng-repeat="item in widgets">
    <directive2 item="item"></directive2>
</li>

这是指令 2 的简化版本:

angular.module('directive2').directive(
    ['$compile', '$rootScope',
    function ($compile, $rootScope) {
        return {
        restrict: 'E',
            scope: { item: '=' },
            templateUrl: 'ext-modules/tile/widgetTemplate.html',
            link: function (scope, element, attrs) { 
                console.log(scope.item); // undefined
            }
        };
    }]);

widgets 上的 ng-repeat 创建了两个项目，我已验证数据存在。该应用程序工作正常，不会引发错误，但我的 console.log 返回:undefined。

我的问题:

如何将指令模板的 ng-repeat 中的值传递给子指令？

---

这是一个 fiddle :http://jsfiddle.net/3znEu/112/

Answer 1

另一个解决方案:

HTML:

<div ng-controller="MyCtrl">
  <directive1></directive1>
</div>

JavaScript:

angular.module('myApp', [])
  .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.widgets = [
      'a', 'b', 'c', 'd'
    ];
   }])
.directive('directive1', function () {
  return {
    restrict: 'E',
    scope: false,
    template: 
      '<li ng-repeat="item in widgets">' +
        '<directive2 item="item"></directive2>' +
      '</li>'
  }
})
.directive('directive2', ['$compile', '$rootScope',
  function ($compile, $rootScope) {
    return {
      restrict: 'E',
      scope: { item: '=' },
      template: 
        '<div>elem = {{item}}</div>',
      link: function (scope, element, attrs) { 
        console.log(scope.item);
      }
   }
}]);

fiddle :http://jsfiddle.net/masa671/dfn75sp3/