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)