AngularJS:父范围在指令(带隔离范围)中不更新双向绑定
发布时间:2020-12-17 08:20:05 所属栏目:安全 来源:网络整理
导读:我有一个带有隔离范围的指令,其值与双向绑定到父范围。我正在调用一个方法来更改父范围中的值,但更改不会在我的指令中应用(双向绑定不被触发)。这个问题非常相似: AngularJS: Parent scope not updated in directive (with isolated scope) two way bindi
|
我有一个带有隔离范围的指令,其值与双向绑定到父范围。我正在调用一个方法来更改父范围中的值,但更改不会在我的指令中应用(双向绑定不被触发)。这个问题非常相似:
AngularJS: Parent scope not updated in directive (with isolated scope) two way binding 但是我没有改变该指令的值,而是仅在父范围内进行更改。我阅读了解决方案,并在第五点说: The watch() created by the isolated scope checks whether it's value for the bi-directional binding is in sync with the parent's value. If it isn't the parent's value is copied to the isolated scope. 这意味着当我的父值更改为2时,会触发手表。它检查父值和指令值是否相同 – 如果不是,它将复制到指令值。好的,但是我的指令值仍然是1 …我失踪了什么? html: <div data-ng-app="testApp">
<div data-ng-controller="testCtrl">
<strong>{{myValue}}</strong>
<span data-test-directive data-parent-item="myValue"
data-parent-update="update()"></span>
</div>
</div>
JS: var testApp = angular.module('testApp',[]);
testApp.directive('testDirective',function ($timeout) {
return {
scope: {
key: '=parentItem',parentUpdate: '&'
},replace: true,template:
'<button data-ng-click="lock()">Lock</button>' +
'</div>',controller: function ($scope,$element,$attrs) {
$scope.lock = function () {
console.log('directive :',$scope.key);
$scope.parentUpdate();
//$timeout($scope.parentUpdate); // would work.
// expecting the value to be 2,but it is 1
console.log('directive :',$scope.key);
};
}
};
});
testApp.controller('testCtrl',function ($scope) {
$scope.myValue = '1';
$scope.update = function () {
// Expecting local variable k,or $scope.pkey to have been
// updated by calls in the directive's scope.
console.log('CTRL:',$scope.myValue);
$scope.myValue = "2";
console.log('CTRL:',$scope.myValue);
};
});
小提琴:http://jsfiddle.net/u69PT/17/
在您的控制器中更改$ scope.myValue后,使用$ scope。$ apply(),如:
testApp.controller('testCtrl',$scope.myValue);
$scope.myValue = "2";
$scope.$apply();
console.log('CTRL:',$scope.myValue);
};
});
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- twitter-bootstrap – 如何在Yii2中仅在年份中选择daterang
- 在与另一个脚本相同的行上定义shell脚本变量
- AngularJs 基础教程 (二) 数据的绑定与表达式
- 检查bash中if语句中的两个条件
- linux – 当Docker容器的PID1退出时,其他进程会发生什么?
- angularJS $q and promise
- Angular2 @HostListener不适用于派生组件
- ASP.NET Core 3.1+MySQL 部署到docker上面使用docker-compo
- 《鸟哥的linux私房菜》 - linux命令温故而知新
- Bootstrap 基础CSS - 表格(Tables)
