传递给子指令时未定义父指令控制器 [英] 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屋！