Question

嘿伙计我有一个小问题..我有一个指令，它有一个ng-repeat和transclude，并在其中分隔了几个需要从itteration继承特定对象的其他指令......

我只能用范围。$ parent ..但这个我不喜欢因为如果父母改变了范围。$ parent可以乘以范围。$ parent。$ parent ...

问题是..如何将每个itteration对象传递给children指令？我已尝试过require和也许是braodcast ..但有了这些我无法发送特定的itteration对象......

<div demo-parent>
   <div demo-child1></div>
   <div demo-child2></div>
</div>

var demo = [obj1, obj2, obj3];

demo.directive('demoParent', [function() {
    return {
       scope: true,
       transclude: true,
       template: '<div ng-repeat="d in demo" ng-transclude></div>'
    ]
}]);

demo.directive('demoChild1', [function() {
    function link(scope, el, attr) {
         scope.someInfo = the specific info from parent; // now with scope.$parent.$parent.d
    }

    return {
       scope: true,
       transclude: true,
       template: '{{someInfo}}',
       link: link
    ]
}]);


demo.directive('demoChild2', [function() {
    function link(scope, el, attr) {
         scope.someInfo = the specific info from parent; // now with scope.$parent.$parent.d
    }

    return {
       scope: true,
       transclude: true,
       template: '{{someInfo}}',
       link: link
    ]
}]);

demoChild1和demoChild2位于标记中的demoParent内，但是sepparate指令

Answer 1

有一种方法可以做到这一点。问题的根源在于具有转换范围和模板范围的地方。我还讨论了许多讨论这个问题的精彩文章; here，here (really good one)和here

此外，我遇到了一个伟大的SO question and (bottom) answer，值得99％的功劳。我只根据你的情况调整了它。

您的问题是您是否使用了子范围，但有一种方法可以使用隔离范围（对您来说可能更安全），我也将展示。

最后，我不是AngularJS专家。我的回答可能不是最好的解决方案或最高效的解决方案。您的用例绝对不同寻常，您可能想重新考虑一下您正在尝试做什么（或者在您的问题中提供更多信息，也许我们可以提供更好的设计）

没有进一步的... 为了我的测试目的，我简化了你的demo数组，在parent指令中包含了一个控制器来定义所述数组，并且稍微区别地声明了我的指令。

HTML：

<body ng-app="soPOC">
    <div demo-parent>
        <div demo-child-one></div>
        <div demo-child-two></div>
    </div>

so.module文件定义根模块：

(function () {
'use strict';
   angular.module('soPOC', []);
})();

demo-parent.directive.js文件定义父指令：

(function () {
'use strict';

angular.module('soPOC')
    .directive('demoParent', demoParent);

demoParent.$inject = ['$compile'];

function demoParent($compile) {
    var transclude;
    var template = '<div ng-repeat="item in demos"></div>';
    var directive = {
        restrict: 'EA',
        controller: controller,
        compile: compile
    };
    return directive;

    function compile(ele) {
        transclude = ele.html();
        ele.html('');

        return function (scope, elem) {
            var tpl = angular.element(template);
            tpl.append(transclude);
            $compile(tpl)(scope);
            elem.append(tpl);
        }
    }

    //deviation from your code
    controller.$inject = ['$scope'];
    function controller($scope) {
        //test array for demo items
        $scope.demos = ['test1', 'test2'];
    }
}

})();

demo-child.directive.js定义子指令1和2：

(function () {
'use strict';

angular
    .module('soPOC')
    .directive('demoChildOne', demoChildOne)
    .directive('demoChildTwo', demoChildTwo);

function demoChildOne() {
    var directive = {
        link: link,
        scope: true,
        restrict: 'EA',
        template: '<div>{{someInfo}}</div>'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.someInfo = scope.item;
    }
}

function demoChildTwo() {
    var directive = {
        link: link,
        scope: true,
        restrict: 'EA',
        template: '<div>{{someInfo}}</div>'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.someInfo = scope.item;
    }
}

})();

如果使用隔离范围样式，然后更改html，则可以从子指令中删除链接函数，并且子指令中的语法稍有变化。

HTML：

<div demo-parent>
        <div demo-child-one item="item"></div>
        <div demo-child-two item="item"></div>
    </div>

指令：

    function demoChildOne() {
    var directive = {
        scope: {
            item: '='
        },
        restrict: 'EA',
        template: '<div>{{item}}</div>'
    };
    return directive;
}

我会阅读我所链接的文章，以便更好地理解为什么这个解决方案有效，并掌握模板，转换和指令之间的范围问题。 hth

将父指令中的数据传递给子指令

1 个答案: