javascript - parameter - directive angularjs



Child-Direktive wird nicht aktualisiert, wenn sich die Eigenschaft der Parent-Direktive ändert (1)

Lösung 1

Ich habe hier ein Working PLNKR eingerichtet: https://plnrkr.co/edit/fsxMJPAc05imhBqefaRk?p=preview

Der Grund für dieses Verhalten liegt darin, dass tmpMenuLink eine Kopie des von MyDirectiveCtrl.isDisabled() Werts MyDirectiveCtrl.isDisabled() . Da kein Watcher eingerichtet ist, können Sie das Problem nur manuell beheben und das Feld aktualisieren.

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

Lösung 2

Eine Alternative ohne Beobachter ist es, die Referenz eines Objekts anstelle eines primitiven Typs zu übergeben.

$scope.menuStatus = {status: false};

neue PLNKR hier: https://plnrkr.co/edit/RGEK6TUuE7gkPDS6ygZe?p=preview

Dies ist Follow-up zu diesen 2 Fragen:

  1. Übergeben Sie das Argument zwischen übergeordneten und untergeordneten Anweisungen
  2. Übergeordneter Direktiv-Controller nicht definiert, wenn er an die untergeordnete Anweisung übergeben wird

Ich habe diesen Teil arbeiten; Wenn sich jedoch der Wert für ng-disabled für die übergeordnete Anweisung ändert, werden die untergeordneten Anweisungswerte nicht aktualisiert.

Siehe dünnes Plunkr-Beispiel .

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

Wie kann ich Änderungen in der Eltern-Direktive erkennen und sie an die Kind-Direktive übergeben, ohne Angular Watcher hinzuzufügen?