我有 3 个嵌套的隔离作用域指令 ( see CodePen here ),我能够将一个函数(接受一个参数)从最外层指令传递到最内层指令(将函数从外部指令传递到中间指令到内部指令)。
我没能理解的是,要将参数从内部指令通过中间指令传回外部指令,需要做些什么。
再次参见 the CodePen example .
注意:仅给定 2 个独立作用域指令,我就可以使用类似于以下内容的东西...
angular.module('myApp', [])
.directive('myDir1', function() {
return {
template: '<div><my-dir-2 add-name="addName(name)"></my-dir-2></div>',
controller: function($scope) {
$scope.addName = function(name) {
alert(name); // alerts 'Henry'
};
}
}
})
.directive('myDir2', function() {
return {
scope: {
addName: '&'
},
template: "<span ng-click='addName({name: testName})'>Click to Add {{testName}}!</span>",
controller: function($scope) {
$scope.testName = 'Henry';
}
}
});
上面的代码为我提供了一个带有“Henry”的警告框(正如我所期望的那样)。
当我添加第三个中间隔离范围指令时,我遇到了问题......
angular.module('myApp', [])
.directive('myDir1', function() {
return {
template: '<div><my-dir-2 add-name="addName(name)"></my-dir-2></div>',
controller: function($scope) {
$scope.addName = function(name) {
alert(name); // alerts 'Henry'
};
}
}
})
.directive('myDir2', function() {
return {
scope: {
addName: '&'
},
template: '<div><my-dir-3 add-name="addName({name: testName})"></my-dir-3></div>',
}
})
.directive('myDir3', function() {
return {
scope: {
addName: '&'
},
template: "<span ng-click='addName({name: testName})'>Click to Add {{testName}}!</span>",
controller: function($scope) {
$scope.testName = 'Henry';
}
}
});
这段代码给我一个带有undefined
的警告框...
最佳答案
一个常见的误解是“& 用于传递函数”。这在技术上是不正确的。
&
所做的是在指令作用域上创建一个函数,当调用该函数时,它会返回针对父作用域计算的表达式的结果。
此函数将一个对象作为参数,在本例中,该对象将使用指令范围({name: testName}
)对象覆盖表达式中的局部变量。
如果您深入了解,myDir2
中的 $scope.addName
方法将如下所示(简化):
$scope.addName = function(locals) {
return $parse(attr.addName)($scope.$parent, locals);
}
你的第二个指令有效,因为它绑定(bind)到的表达式是
addName(name)
这个表达式有一个局部变量 name
,当用
addName({name: testName}) //in the directive.
请记住 - myDir2
中的 addName
函数与 myDir1
中的 addName
函数不同。这是一个计算表达式的新函数
addName(name)
针对父作用域并返回结果。
当您将此逻辑应用于 myDir3
时,计算的表达式为:
addName({name: testName})
请注意,此表达式中唯一的局部变量是“testName”。因此,当您使用
调用myDir3
时
addName({name: testName})
没有要覆盖的局部变量 name
,testName
未定义。
呸!难怪这让每个人都感到困惑!
如何在您的示例中修复:
您希望表达式计算为 myDir1
中的实际函数。
angular.module('myApp', [])
.directive('myDir1', function() {
return {
template: '<div><my-dir-2 add-name="addName"></my-dir-2></div>',
controller: function($scope) {
$scope.addName = function(name) {
alert(name); // alerts 'Henry'
};
}
}
})
.directive('myDir2', function() {
return {
scope: {
addName: '&'
},
// addName() returns the actual function addName from myDir1
template: '<div><my-dir-3 add-name="addName()"></my-dir-3></div>',
}
})
.directive('myDir3', function() {
return {
scope: {
addName: '&'
},
//calls addName() on myDir2, which returns addName from myDir1, then invokes it passing testName as an argument
template: "<span ng-click='addName()(testName)'>Click to Add {{testName}}!</span>",
controller: function($scope) {
$scope.testName = 'Henry';
}
}
});
最后的说明 - 这里 '&'
比 '='
更合适的原因是 '='
实际上会设置一个 $watch
并双向绑定(bind)指令之间的变量。这意味着 myDir2
实际上可以更改 myDir1
中的函数 appName
,这不是必需的,也是不可取的。它还需要设置两个 $watch
,出于 Angular 中的性能原因,我尽量避免这样做。
关于javascript - AngularJs:使用 Angular 指令跨多个隔离范围传递函数参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29762926/