传递给子指令时未定义父指令控制器 [英] Parent directive controller undefined when passing to child directive
本文介绍了传递给子指令时未定义父指令控制器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在这篇文章中提出了一般性问题.我有工作示例的答案;但是,当我尝试使用此示例修改现有代码时,出现错误.在下面和这个 Plunker 页面中查看我的代码.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script><div ng-app="myApp"><tmp-menu ng-disabled="true"><tmp-menu-link></tmp-menu-link><tmp-menu-link></tmp-menu-link></tmp-菜单>
JavaScript(AngularJS):
angular.module('myApp', []).controller('MyDirectiveController', MyDirectiveController).directive('tmpMenu', function() {返回 {限制:'AE',替换:真,转置:真,范围:{禁用:'=?ngDisabled'},控制器:'MyDirectiveController',模板:'<div>myDirective Disabled: {{ disabled }}<ng-transclude></ng-transclude></div>',链接:函数(范围,元素,属性){}};}).directive('tmpMenuLink', function() {返回 {限制:'AE',替换:真,转置:真,范围:{},需要:'^^tmpMenu',模板: '<div>childDirective disabled: {{ disabled }}</div>',链接:函数(范围、元素、属性、MyDirectiveCtrl){控制台.log(MyDirectiveCtrl);scope.disabled = MyDirectiveCtrl.isDisabled();}};})函数 MyDirectiveController($scope) {this.isDisabled = function() {返回 $scope.disabled;};}
内部指令 tmpMenuLink,MyDirectiveCtrl 未定义.这是为什么?
解决方案
你的代码有错别字:
required:'^^tmpMenu',
改成
require:'^^tmpMenu',
检查这个 plunkr
https://plnkr.co/edit/DgyW3OFgr1GyAR8fuATi?p=preview
I asked general question here in this post. I've got answer with working example; however when I try to use this example to modify existing code, I get error. See my code below and in this Plunker page.
Html
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<div ng-app="myApp">
<tmp-menu ng-disabled="true">
<tmp-menu-link></tmp-menu-link>
<tmp-menu-link></tmp-menu-link>
</tmp-menu>
</div>
JavaScript(AngularJS):
angular.module('myApp', [])
.controller('MyDirectiveController', MyDirectiveController)
.directive('tmpMenu', function() {
return {
restrict: 'AE',
replace:true,
transclude:true,
scope:{
disabled: '=?ngDisabled'
},
controller: 'MyDirectiveController',
template: '<div>myDirective Disabled: {{ disabled }}<ng-transclude></ng-transclude></div>',
link: function(scope, element, attrs) {
}
};
})
.directive('tmpMenuLink', function() {
return {
restrict: 'AE',
replace:true,
transclude:true,
scope:{
},
required:'^^tmpMenu',
template: '<div>childDirective disabled: {{ disabled }}</div>',
link: function(scope, element, attrs, MyDirectiveCtrl) {
console.log(MyDirectiveCtrl);
scope.disabled = MyDirectiveCtrl.isDisabled();
}
};
})
function MyDirectiveController($scope) {
this.isDisabled = function() {
return $scope.disabled;
};
}
Inside directive tmpMenuLink, MyDirectiveCtrl is undefined. Why is that?
解决方案
You have a typo in your code:
required:'^^tmpMenu',
change it to
require:'^^tmpMenu',
Check this plunkr
https://plnkr.co/edit/DgyW3OFgr1GyAR8fuATi?p=preview
这篇关于传递给子指令时未定义父指令控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文