大佬教程收集整理的这篇文章主要介绍了angularjs – 多指令[ngController,…]要求新/隔离范围,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<div parent parent-model="vm.model1" ng-controller="Controller as vm"> Parent </div>
控制器是:
app.controller("Controller",Controller); function Controller() { var vm = this; vm.model1 = "My Model 1"; vm.model2 = "My Model 2"; }
app.directive("parent",parent); function parent() { var parent = { controller: ["$scope",controller],replace: false,reStrict: "A",scope: { model: "=" } }; return parent; function controller($scopE) { console.log($scope.model); } }
使用parent-model =“vm.model1”,我试图说明指令应该使用控制器中的哪个属性.但是当我在指令中执行console.log($scope.model)时,我得到错误:
"Error: [$compile:multidir] Multiple directives [ngController,parent (module: app)] asking for new/isolated scope on: <div parent="" parent-model="vm.model1" ng-controller="Controller as vm">
怎么解决这个?
…非常具有说明性,因为AngularJS不允许多个指令(在相同的DOM级别上)创建自己的隔离范围.
根据documentation,强制实施此限制是为了防止$scope对象的冲突或不受支持的配置.
通常,指令随隔离范围一起提供,其意图是组件化或重用附加到DOM的一些逻辑/动作.
因此,有意义的是,两个可重用的组件不能合并在一起以产生组合效果(至少在AngularJS中).
解
更改您的指令用法,以便从其直接父级(在本例中为ngController指令)提供所需的属性.
<div ng-controller="Controller as vm"> <div parent parent-model="vm.model1"></div> </div>
同样,您可以以规范化格式访问传递的属性到指令的隔离范围:
app.directive('parent',function(){ return { scope: { parentModel: '=' // property passed from the parent scope },controller: function($scopE){ console.log($scope.parentModel); } }; });
指令传播指令
如前所述,具有隔离范围的两个或多个指令不能在同一DOM元素上使用.但是,其中一个指令可能@R_826_10058@的范围.在这种情况下,其他指令可以根据需要通过要求其控制器进行通信:
<div dir-isolate dir-sibling></div> ... .directive('dirIsolate',function(){ return { scope: {},controller: function(){ this.askSomething = function(){ return 'Did you ask for something?'; }; } }; }) .directive('dirSibling',function(){ return { require: 'dirIsolate',// here is the trick link: function(scope,iElement,attrs,dirSiblingCtrl){ // required controller passed to the link function as fourth argument console.log(dirSiblingCtrl.askSomething()); } }; });
以上是大佬教程为你收集整理的angularjs – 多指令[ngController,…]要求新/隔离范围全部内容,希望文章能够帮你解决angularjs – 多指令[ngController,…]要求新/隔离范围所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。