angularjs - directivas - El controlador de la directiva principal no está definido al pasar a la directiva infantil
directivas angularjs (2)
Porque no es 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>
Hice una pregunta general aquí en esta publicación . Tengo respuesta con un ejemplo de trabajo; Sin embargo, cuando intento utilizar este ejemplo para modificar el código existente, aparece un error. Ver mi código a continuación y en esta página de 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-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;
};
}
Dentro de la directiva tmpMenuLink , MyDirectiveCtrl no está definido . ¿Porqué es eso?
Usted tiene un error tipográfico en su código:
required:''^^tmpMenu'',
cambiarlo a
require:''^^tmpMenu'',
Comprueba este plunkr