Javascript 将值从父指令模板传递到子指令

问题：

我试图将一个值从ng repeat传递到一个子指令中，但当我试图访问指令2中传递的变量时，我得到了“undefined”

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

我的尝试：

以下是我的指令1模板的简化版本：

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

小部件上的ng repeat创建了两个项目，我已经验证了数据是否存在。应用程序工作正常，不会抛出错误，但my console.log返回：undefined

我的问题: 如何将指令模板的ng repeat中的值传递给子指令

---

---

这里有一个提示：

当您将

directive2

作为指令名，而不是

模块

时，它可以正常工作：

“严格使用”；
var app=angular.module（'myApp'，[]）
.controller（'myController'，['$scope'，函数（$scope）{
$scope.greeting='Hello World！'；
$scope.widgets=[“111”、“222”、“333”]
}]);
应用指令（“指令1”，
[“$compile”、“$rootScope”，
函数（$compile，$rootScope）{
返回{
限制：'E'，
作用域：{item:'='}，
模板：“{item}}”，
链接：函数（作用域、元素、属性）{
console.log（scope.item）；//未定义
}
};
}]);

我对你的提琴手做了一些修改。
很少改动
1.在您的指令中添加了限制。
2.添加了用于呈现项目的模板（仅用于测试和演示）
3.将范围中的项从“@”更改为“=”

angular.module("myApp").directive("directive1", function(){
return {
restrict: 'E',
scope: {

  item: "="
},
template: "{{item}}"
}
});

---

另一个解决方案建议：

HTML:

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

angular.module（'myApp'，[]）
.controller（'MyCtrl'，['$scope'，函数（$scope）{
$scope.widgets=[
“a”、“b”、“c”、“d”
];
}])
.directive（'directive1'，function（）{
返回{
限制：'E'，
范围：假，
模板：
“
”+
'' +
“
”
}
})
.directive（'directive2'，['$compile'，'$rootScope'，
函数（$compile，$rootScope）{
返回{
限制：'E'，
作用域：{item:'='}，
模板：
'elem={{item}}'，
链接：函数（作用域、元素、属性）{
console.log（scope.item）；
}
}
}]);

---

Fiddle:

您发布的代码不应记录为未定义。在plunkr中尝试一下。谢谢，@rob，我正在尝试组装一个JSFIDLE。如果使用ng repeat，为什么要问ng？另外，创建名为“directive2”的模块真的是有意的吗？您可以创建一个JSFIDLE来表示您的问题吗？

angular.module("myApp").directive("directive1", function(){
return {
restrict: 'E',
scope: {

  item: "="
},
template: "{{item}}"
}
});

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

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