是否可以在嵌套隔离范围之间以两种方式绑定变量?
Is it possible to two way bind variables between nested isolate scopes?
考虑下面的嵌套指令。我一直在尝试在嵌套指令的隔离范围之间绑定变量,但无法实现双向绑定。
在示例中,我希望 outerPower
绑定到 innerPower
并在 innerPower
数字递增时更改。
勾选 fiddle http://jsfiddle.net/hally9k/sqea6Ln7/
testApp.directive('innerDirective', function () {
return {
scope: {
innerPower: '&'
},
template: '<div><p>Inner Power = {{innerPower}}</p>' +
'<button ng-click="increment();">Power up!</button>' +
'</div>',
controller: function ($scope, $element, $attrs) {
$scope.increment = function() {
++$scope.innerPower;
}
}
};
});
testApp.directive('outerDirective', function () {
return {
scope: {
},
template: '<div><p>Outer Power = {{outerPower}}</p>' +
'<div inner-directive inner-power="outerPower"></div>' +
'</div>',
controller: function ($scope, $element, $attrs) {
$scope.outerPower = 0;
}
};
});
对于双向绑定,您需要对范围变量使用=
。 &
只应在您的指令需要在父作用域中执行函数时使用。
scope: {
innerPower: '='
},
只换单行
scope: {
innerPower: '=' //instead of &
}
考虑下面的嵌套指令。我一直在尝试在嵌套指令的隔离范围之间绑定变量,但无法实现双向绑定。
在示例中,我希望 outerPower
绑定到 innerPower
并在 innerPower
数字递增时更改。
勾选 fiddle http://jsfiddle.net/hally9k/sqea6Ln7/
testApp.directive('innerDirective', function () {
return {
scope: {
innerPower: '&'
},
template: '<div><p>Inner Power = {{innerPower}}</p>' +
'<button ng-click="increment();">Power up!</button>' +
'</div>',
controller: function ($scope, $element, $attrs) {
$scope.increment = function() {
++$scope.innerPower;
}
}
};
});
testApp.directive('outerDirective', function () {
return {
scope: {
},
template: '<div><p>Outer Power = {{outerPower}}</p>' +
'<div inner-directive inner-power="outerPower"></div>' +
'</div>',
controller: function ($scope, $element, $attrs) {
$scope.outerPower = 0;
}
};
});
对于双向绑定,您需要对范围变量使用=
。 &
只应在您的指令需要在父作用域中执行函数时使用。
scope: {
innerPower: '='
},
只换单行
scope: {
innerPower: '=' //instead of &
}