Eltern-Direktiven-Controller undefiniert bei Weitergabe an Kind-Direktive

Question

Ich habe allgemeine Frage hier in this post gestellt. Ich habe Antwort mit Arbeitsbeispiel; Wenn ich jedoch versuche, dieses Beispiel zu verwenden, um vorhandenen Code zu ändern, erhalte ich einen Fehler. Siehe meinen Code unten und in diesem .

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

Innen Richtlinie tmpMenuLink, MyDirectiveCtrl ist undefined. Warum ist das?

Answer 1

Sie haben einen Tippfehler in Ihrem Code:

required:'^^tmpMenu', 

Änderung es

require:'^^tmpMenu', 

prüfen diese plunkr

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

Answer 2

Weil es require nicht required ist.

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>