[英]Pass a value from parent directive template to child directive
Problem: 问题:
I'm attempting to pass a value from an ng-repeat into a child-directive but when I try to access my passed variable in directive 2 I get "undefined". 我试图将ng-repeat中的值传递给child-directive但是当我尝试在指令2中访问我传递的变量时,我得到“undefined”。
Here's an illustration of what I am attempting. 这是我正在尝试的一个例子。 Basically directive 1 represents an array of widgets while directive 2 represents a single widget.
基本上, 指令1表示小部件阵列,而指令2表示单个小部件。 I am attempting to pass an item from the ng-repeat loop into my child directive.
我试图将ng-repeat循环中的项目传递给我的child指令。
My Attempt: 我的尝试:
Here's a simplified version of my directive 1 template: 这是我的指令1模板的简化版本:
<li ng-repeat="item in widgets">
<directive2 item="item"></directive2>
</li>
Here's a simplified version of directive 2 : 这是指令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
}
};
}]);
The ng-repeat on widgets creates two items and I have verified that the data exists. 小部件上的ng-repeat创建了两个项目,并且我已验证数据是否存在。 The application works fine and doesn't throw an error but my console.log returns : undefined.
该应用程序工作正常,不会抛出错误,但我的console.log返回:undefined。
How can I pass a value from a directive template's ng-repeat into a child-directive? 如何将指令模板的ng-repeat中的值传递给子指令?
here's a fiddle: http://jsfiddle.net/3znEu/112/ 这是一个小提琴: http : //jsfiddle.net/3znEu/112/
It works fine when you put directive2
as directive name, not module
: 当你将
directive2
作为指令名而不是module
时,它工作正常:
http://jsfiddle.net/3znEu/113/ 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
}
};
}]);
Yet another solution proposal: 另一个解决方案提案:
HTML: HTML:
<div ng-controller="MyCtrl">
<directive1></directive1>
</div>
JavaScript: 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);
}
}
}]);
Fiddle: http://jsfiddle.net/masa671/dfn75sp3/ 小提琴: http : //jsfiddle.net/masa671/dfn75sp3/
I have modified your fiddler a bit http://jsfiddle.net/3znEu/115/ . 我已经修改了你的小提琴手http://jsfiddle.net/3znEu/115/ 。
Few changes 几乎没有变化
1. Added a restrict to your directive. 1.为您的指令添加了限制。
2. Added a template to render the Items (only for testing and demo) 2.添加了一个模板来渲染项目(仅用于测试和演示)
3. Changed items in scope from '@' to '=' 3.将范围中的项目从“@”更改为“=”
angular.module("myApp").directive("directive1", function(){
return {
restrict: 'E',
scope: {
item: "="
},
template: "{{item}}"
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.