javascript - tag - title of page html

Directiva secundaria no actualizada cuando cambia la propiedad de la directiva principal

Question

Este es el seguimiento de estas 2 preguntas:

1. Pase la discusión entre las directivas padre e hijo
2. El controlador de la directiva principal no está definido al pasar a la directiva infantil

Tengo esta parte funcionando; sin embargo, cuando el valor de ng-disabled para la directiva principal cambia, los valores de la directiva hijo no se actualizan.

Por favor, vea el ejemplo de thin plunkr .

HTML:

<div ng-app="myApp">
  <div ng-controller="MyController">
    {{menuStatus}}
    <tmp-menu ng-disabled="menuStatus">
      <tmp-menu-link></tmp-menu-link>
      <tmp-menu-link></tmp-menu-link>
    </tmp-menu>
    <button ng-click="updateStatus()">Update</button>
  </div>
</div>

JavaScript (AngularJS):

angular.module(''myApp'', [])
.controller(''MyDirectiveController'', MyDirectiveController)
.controller(''MyController'', function($scope){
  $scope.menuStatus = false;
  $scope.updateStatus = function(){
    $scope.menuStatus = $scope.menuStatus?false:true;
  }
})
.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:{
    },
    require:''^^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;
  };
}

¿Cómo puedo detectar el cambio en la directiva de los padres y pasarla a la directiva de niños sin agregar un observador angular?

Answer 1

Solución 1

He creado un plnkr de trabajo aquí: https://plnkr.co/edit/fsxMJPAc05imhBqefaRk?p=preview

El motivo de este comportamiento es que tmpMenuLink guardó una copia del valor devuelto por MyDirectiveCtrl.isDisabled() . no se ha configurado ningún monitor, por lo que la única forma de resolverlo es observar manualmente cualquier cambio y luego actualizar el campo.

scope.$watch(function(){
  return MyDirectiveCtrl.isDisabled();
}, function(){
   scope.disabled = MyDirectiveCtrl.isDisabled();
})

Solución 2

Una alternativa sin vigilantes es pasar la referencia de un objeto en lugar de un tipo primitivo, algo así como:

$scope.menuStatus = {status: false};

nuevo plnkr aquí: https://plnkr.co/edit/RGEK6TUuE7gkPDS6ygZe?p=preview