Aktualisierung der Angular-Direktive bei Parameteränderung

Question 1

Ich habe eine eckige Direktive, die wie folgt initialisiert wird:

<conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation>

Ich möchte, dass es klug genug ist, die Richtlinie wann zu aktualisieren $scope.some_prop Änderungen, da dies impliziert, dass es völlig andere Inhalte zeigen sollte.

Ich habe es so getestet, wie es ist, und es passiert nichts, die Verknüpfungsfunktion wird nicht einmal aufgerufen, wenn $scope.some_prop Änderungen. Gibt es eine Möglichkeit, dies zu erreichen?

Question 2

Die Link-Funktion wird nur einmal aufgerufen, daher würde sie nicht direkt das tun, was Sie erwarten. Sie müssen eckig verwenden $watch um eine Modellvariable zu beobachten.

Diese Uhr muss in der Link-Funktion eingerichtet werden.

Wenn Sie einen isolierten Geltungsbereich für Richtlinien verwenden, wäre der Geltungsbereich

scope :{typeId:'@' }

In deiner Linkfunktion fügst du dann gerne eine Uhr hinzu

link: function(scope, element, attrs) {
    scope.$watch("typeId",function(newValue,oldValue) {
        //This gets called when data changes.
    });
 }

Wenn Sie keinen isolierten Bereich verwenden, verwenden Sie watch on some_prop

Question 3

Was Sie versuchen, ist, die Eigenschaft des Attributs in der Direktive zu überwachen. Sie können die Eigenschaft von Attributänderungen mit beobachten $beobachten() folgendermaßen:

angular.module('myApp').directive('conversation', function() {
  return {
    restrict: 'E',
    replace: true,
    compile: function(tElement, attr) {
      attr.$observe('typeId', function(data) {
            console.log("Updated data ", data);
      }, true);

    }
  };
});

Denken Sie daran, dass ich hier die Funktion „compile“ in der Anweisung verwendet habe, weil Sie nicht erwähnt haben, ob Sie Modelle haben und ob dies leistungsempfindlich ist.

Wenn Sie Modelle haben, müssen Sie die ‘kompilieren‘ Funktion zu ‘Verknüpfung‘ oder verwenden ‘Regler‘ und um die Eigenschaft eines Modells zu überwachen, sollten Sie verwenden $watch()und nehmen Sie die eckigen {{}} Klammern aus der Eigenschaft, Beispiel:

<conversation style="height:300px" type="convo" type-id="some_prop"></conversation>

Und in der Richtlinie:

angular.module('myApp').directive('conversation', function() {
  return {
    scope: {
      typeId: '=',
    },
    link: function(scope, elm, attr) {

      scope.$watch('typeId', function(newValue, oldValue) {
          if (newValue !== oldValue) {
            // You actions here
            console.log("I got the new value! ", newValue);
          }
      }, true);

    }
  };
});

Question 4

Ich hoffe, dies hilft beim Neuladen/Aktualisieren der Anweisung zum Wert aus dem übergeordneten Bereich

<html>

        <head>
            <!-- version 1.4.5 -->
            <script src="https://stackoverflow.com/questions/20856824/angular.js"></script>
        </head>

        <body ng-app="app" ng-controller="Ctrl">

            <my-test reload-on="update"></my-test><br>
            <button ng-click="update = update+1;">update {{update}}</button>
        </body>
        <script>
            var app = angular.module('app', [])
            app.controller('Ctrl', function($scope) {

                $scope.update = 0;
            });
            app.directive('myTest', function() {
                return {
                    restrict: 'AE',
                    scope: {
                        reloadOn: '='
                    },
                    controller: function($scope) {
                        $scope.$watch('reloadOn', function(newVal, oldVal) {
                            //  all directive code here
                            console.log("Reloaded successfully......" + $scope.reloadOn);
                        });
                    },
                    template: '<span>  {{reloadOn}} </span>'
                }
            });
        </script>


   </html>

Question 5

Wenn Sie unter AngularJS 1.5.3 oder neuer arbeiten, sollten Sie erwägen, zu Komponenten statt zu Direktiven zu wechseln. Diese funktionieren sehr ähnlich wie Direktiven, aber mit einigen sehr nützlichen zusätzlichen Funktionen, wie z. B. $onChanges(changesObj), einem der Lebenszyklus-Hooks, der aufgerufen wird, wenn One-Way-Bindings aktualisiert werden.

app.component('conversation ', {
    bindings: {
    type: '@',
    typeId: '='
    },
    controller: function() {
        this.$onChanges = function(changes) {
            // check if your specific property has changed
            // that because $onChanges is fired whenever each property is changed from you parent ctrl
            if(!!changes.typeId){
                refreshYourComponent();
            }
        };
    },
    templateUrl: 'conversation .html'
});

Hier ist die Dokumente zum Vertiefen in Bauteile.