angularjs – 从指令更新控制器范围
发布时间:2020-12-17 07:27:49 所属栏目:安全 来源:网络整理
导读:我正在使用AngularJS指令创建可重用的UI组件.我想有一个控制器,其中包含我的业务逻辑与嵌套组件(指令).我希望指令能够操作控制器范围上的单个属性.指令需要有一个隔离范围,因为我可能会多次使用同一个指令,并且每个实例都需要绑定到特定的控制器范围属性. 到
我正在使用AngularJS指令创建可重用的UI组件.我想有一个控制器,其中包含我的业务逻辑与嵌套组件(指令).我希望指令能够操作控制器范围上的单个属性.指令需要有一个隔离范围,因为我可能会多次使用同一个指令,并且每个实例都需要绑定到特定的控制器范围属性.
到目前为止,我可以将更改应用到控制器范围的唯一方法是从指令调用范围.$apply().但是当我因为rootScope:inprog(范围操作正在进行中)错误而进入ng-click回调时,这会中断. 所以我的问题是:当子指令更新控制器范围的值时,让控制器知道的最佳方法是什么? 我已经考虑过在控制器上有一个函数,指令可以调用它来进行更新,但这对我来说似乎很重要. 这是我的代码打破了ng-click回调.请记住,我不只是想解决ng-click问题.我想要最好的整体解决方案来应用可重用指令来修改父作用域/模型. HTML <div ng-controller="myCtrl"> <my-directive value="val1"></my-directive> </div> 调节器 ... .controller('myCtrl',['$scope',function ($scope) { $scope.val1 = 'something'; }}); 指示 ... .directive('myDirective',[function () { return { link: function(scope) { scope.buttonClick = function () { var val = 'new value'; scope.value = val; scope.$apply(); }; },scope: { value: '=' },template: '<button ng-click="buttonClick()"></button>' }; }]);
指令中双向数据绑定的目的正是您所要求的 – “[允许]指令修改父作用域/模型”.
首先,仔细检查您是否在指令属性上正确设置了双向数据绑定,该属性公开了要在作用域之间共享的变量.在控制器中,如果您需要在值更改时执行某些操作,则可以使用$watch来检测更新.此外,您还可以选择向指令添加事件处理程序属性.这允许指令在发生某事时调用函数.这是一个例子: <div ng-controller="myCtrl"> <my-directive value="val1" on-val-change="myFunc"> <!-- Added on-change binding --> <button ng-click="buttonClick()"></button> </my-directive> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- attention when you debug bootstrap's form layout
- 使用AngularJS下载文件
- 练习 4:Bash:处理文件,pwd,ls,cp,mv,rm,touch
- Ctags快速入门
- 什么是fn *和Clojure bootstrap如何?
- Angular 2,Webpack Uncaught ReferenceError:vendor …在添
- angularjs – Bootstrap UI:如何更改popover的背景颜色
- 在Scala中使用选项的惯用方法
- 【数据结构】查找算法:二分查找、顺序查找
- [ng-alain系列]一套基于 Ng-zorro-antd 企业后台模板。