gpt4 book ai didi

javascript - 将数据从父指令传递到子指令

转载 作者:行者123 更新时间:2023-11-27 22:53:44 25 4
gpt4 key购买 nike

嘿伙计们,我有一个小问题..我有一个指令,它有一个 ng-repeat 和 transinclude,并且在它的内部分隔了几个需要从迭代继承特定对象的其他指令...

我只能用scope.$parent..来做到这一点,但我不喜欢这个,因为如果父级发生变化,scope.$parent可能会乘以scope.$parent.$parent...

问题是..如何将每个迭代对象传递给子指令?我尝试过 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
]
}]);

demoChild1 和 demoChild2 位于标记中的 demoParent 内,但有单独的指令

最佳答案

有一种方法可以做到这一点。问题的根源在于嵌入范围和模板范围。我也看到了很多讨论这个问题的优秀文章; here , here (really good one) ,和 here

另外,我遇​​到了一个很棒的SO question and (bottom) answer这值得99%的功劳。我只是根据您的情况进行了调整。

您的问题要求您使用子作用域,但有一种方法可以使用隔离作用域(这对您来说可能更安全)来执行此操作,我也会展示这一点。

最后,我不是 AngularJS 专家。我的答案可能不是最好的解决方案或性能最好的解决方案。您的用例绝对不寻常,您可能需要重新考虑您想要做什么(或者在您的问题中提供更多信息,也许我们可以提供更好的设计)

话不多说...出于测试目的,我简化了您的演示数组,在父指令中包含一个 Controller 来定义所述数组,并以稍微不同的方式声明我的指令。

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 定义子指令一和二:

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

我会通读我链接的文章,以更好地理解该解决方案为何有效,并掌握模板、嵌入和指令之间的范围问题。第h

关于javascript - 将数据从父指令传递到子指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37812701/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com