将值从父指令模板传递给子指令答案

【问题标题】：Pass a value from parent directive template to child directive将值从父指令模板传递给子指令
【发布时间】：2015-12-08 05:10:34
【问题描述】：

问题：

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

这是我正在尝试的说明。基本上 directive 1 代表一个小部件数组，而 directive 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 返回：未定义。

我的问题：

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

这是一个小提琴：http://jsfiddle.net/3znEu/112/

【问题讨论】：

您发布的代码不应记录未定义。试一试。
谢谢，@rob，我现在正在尝试组装一个 jsFiddle
如果您使用的是 ng-repeat，为什么还要询问 ng-if？另外，是否真的打算创建名为“directive2”的模块？你能创建 jsfiddle 来解决你的问题吗？

标签： javascript angularjs

【解决方案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);
      }
   }
}]);

小提琴：http://jsfiddle.net/masa671/dfn75sp3/

【讨论】：

【解决方案2】：

当您将directive2 作为指令名称而不是module 时，它可以正常工作：

http://jsfiddle.net/3znEu/113/

      'use strict';

       var app = angular.module('myApp', [])
        .controller('myController', ['$scope', function($scope) {
            $scope.greeting = 'Hello World!';
            $scope.widgets = ["111","222","333"]
        }]);

        app.directive('directive1',
            ['$compile', '$rootScope',
            function ($compile, $rootScope) {
                return {
                restrict: 'E',
                    scope: { item: '=' },
                    template: '<div>{{item}}</div>',
                    link: function (scope, element, attrs) { 
                        console.log(scope.item); // undefined
                    }
                };
            }]);

【讨论】：

【解决方案3】：

我已经稍微修改了你的提琴手http://jsfiddle.net/3znEu/115/。
几乎没有变化
1. 为您的指令添加了限制。
2.增加了一个模板来渲染项目（仅用于测试和演示）
3. 将范围内的项目从“@”更改为“=”

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

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

【讨论】：