父指令控制器傳遞給子指令時未定義

我在this post這裏詢問了一般問題。我以工作示例回答了問題;但是，當我嘗試使用此示例修改現有代碼時，出現錯誤。請參閱下面的代碼和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; 
    }; 
}

內部指令tmpMenuLink，MyDirectiveCtrl是不確定。這是爲什麼？

來源

2017-03-23 user1351452

你有一個錯字在你的代碼：

required:'^^tmpMenu',

將其更改爲

require:'^^tmpMenu',

入住這plunkr

https://plnkr.co/edit/DgyW3OFgr1GyAR8fuATi?p=preview

來源

2017-03-23 21:30:06

在此處添加後續問題：http://stackoverflow.com/questions/43128652/child-directive-not-updated-when-parent-directive-property-changes – user1351452

因爲它是require而不是required。

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, 
 
     require: '^^tmpMenu', 
 
     template: '<div>childDirective disabled: {{ disabled }}</div>', 
 
     link: function(scope, element, attrs, MyDirectiveController) { 
 

 
     scope.disabled = MyDirectiveController.isDisabled(); 
 

 
     } 
 
    }; 
 
    }) 
 

 
function MyDirectiveController($scope) { 
 
    this.isDisabled = function() { 
 
    return $scope.disabled; 
 
    }; 
 
}

<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>

來源

2017-03-23 21:27:25 cnorthfield

父指令控制器傳遞給子指令時未定義

回答

相關問題