Javascript 将数据从父指令传递到子指令

嘿，伙计们，我有个小问题。。我有一个指令，它有一个ng repeat和transclude，在它里面分隔了其他几个指令，这些指令需要从该指令继承特定的对象

我只能在scope中执行此操作。$parent。。但我不喜欢这样，因为如果父对象更改范围，$parent可以乘以scope。$parent。$parent

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

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

var demo=[obj1、obj2、obj3]；
demo.directive（'demoParent'，[function（）{
返回{
范围：正确，
是的，
模板：“”
]
}]);
demo.directive（'demoChild1'，[function（）{
功能链接（范围、el、属性）{
scope.someInfo=来自父对象的特定信息；//现在使用scope.$parent.$parent.d
}
返回{
范围：正确，
是的，
模板：“{someInfo}}”，
链接：链接
]
}]);
demo.directive（'demoChild2'，[function（）{
功能链接（范围、el、属性）{
scope.someInfo=来自父对象的特定信息；//现在使用scope.$parent.$parent.d
}
返回{
范围：正确，
是的，
模板：“{someInfo}}”，
链接：链接
]
}]);

---

demoChild1和demoChild2位于标记中的demoParent中，但seParate指令有一种方法可以做到这一点。问题的根源在于转换范围和模板范围。我也读过许多讨论此问题的优秀文章；和

另外，我遇到了一个很棒的，值得99%赞扬的人。我只是根据你的情况修改了它

您的问题要求您使用子作用域，但有一种方法可以使用隔离作用域（对您来说可能更安全），我也将展示这种方法

最后，我不是AngularJS专家。我的答案可能不是最好的解决方案或性能最好的解决方案。您的用例肯定与众不同，您可能需要重新考虑您正在尝试做什么（或者在您的问题中提供更多信息，也许我们可以提供更好的设计）

不用再麻烦了。。。 出于测试目的，我简化了演示数组，在父指令中包含了一个控制器来定义所述数组，并以稍微不同的方式声明了我的指令

HTML:

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

})();

（函数（）{
"严格使用",；
角度模块（'soPOC'））
.指令（“demoParent”，demoParent）；
demoParent.$inject=['$compile']；
函数demoParent（$compile）{
var转移；
var模板=“”；
var指令={
限制：“EA”，
控制器：控制器，
编译：编译
};
返回指令；
函数编译（ele）{
transclude=ele.html（）；
ele.html（“”）；
返回函数（范围、元素）{
var tpl=角度元素（模板）；
第三方物流附加（转包）；
美元（第三方物流）（范围）；
要素附加（tpl）；
}
}
//与代码的偏差
控制器。$inject=['$scope']；
功能控制器（$scope）{
//演示项目的测试阵列
$scope.demos=['test1'，'test2']；
}
}
})();

demo-child.directive.js定义子指令一和二：

(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;
    }
}

})();

（函数（）{
"严格使用",；
有棱角的
.module（'soPOC'））
.指令（'demoChildOne'，demoChildOne）
.指令（“demoChildTwo”，demoChildTwo）；
函数demoChildOne（）{
var指令={
链接：链接，
范围：正确，
限制：“EA”，
模板：“{someInfo}}”
};
返回指令；
功能链接（范围、元素、属性）{
scope.someInfo=scope.item；
}
}
函数demoChildTwo（）{
var指令={
链接：链接，
范围：正确，
限制：“EA”，
模板：“{someInfo}}”
};
返回指令；
功能链接（范围、元素、属性）{
scope.someInfo=scope.item；
}
}
})();

如果使用独立作用域样式，则html会发生更改，您可以从子指令中删除链接函数，并且子指令中的语法会略有更改

HTML:

指令：

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

函数demoChildOne（）{
var指令={
范围：{
项目：'='
},
限制：“EA”，
模板：“{item}}”
};
返回指令；
}

我将通读我链接的文章，以便更好地理解此解决方案的工作原理，并掌握模板、转换和指令之间的范围问题。

---

hth

您好，您能为您的问题添加一个最小的、完整的、可验证的示例吗？这将有助于理解您的问题：当然，对不起，我很匆忙，这里有一个非常简单的想法，说明我正在努力实现的目标。指令之间共享数据的最佳方式是使用服务是的，但当我有了此书面意见时，我该怎么做该服务共享对其特定子项的指令中的每个元素。您可以显示嵌套指令标记的外观吗？

(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;
    }
}

})();

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