wake-up-neo.com

Aktualisierung der Winkelrichtlinie bei Parameteränderung

Ich habe eine Winkelanweisung, 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 Direktive zu aktualisieren, wenn sich $scope.some_prop ändert, da dies impliziert, dass der Inhalt völlig unterschiedlich ist.

Ich habe es getestet und nichts passiert. Die Linking-Funktion wird nicht einmal aufgerufen, wenn sich $scope.some_prop ändert. Gibt es eine Möglichkeit, dies zu erreichen?

70
Luke Sapan

Die Link-Funktion wird nur einmal aufgerufen, sodass sie nicht das tut, was Sie erwarten. Sie müssen den Winkel $watch verwenden, um eine Modellvariable zu überwachen. 

Diese Uhr muss in der Link-Funktion eingerichtet werden.

Wenn Sie isolierten Geltungsbereich für die Direktive verwenden, wäre der Geltungsbereich

scope :{typeId:'@' }

In deiner Linkfunktion fügst du dann 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 auf some_prop.

91
Chandermani

Sie versuchen, die Eigenschaft des Attributs in der Direktive zu überwachen. Sie können die Eigenschaft von Attributänderungen mit $ observ () wie folgt beobachten:

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 in der Direktive hier die Funktion zum Kompilieren verwendet habe, da Sie nicht erwähnt haben, ob Sie Modelle haben und ob dies leistungsabhängig ist. 

Wenn Sie über Modelle verfügen, müssen Sie die Funktion 'compile' in 'link' ändern oder 'controller' verwenden. Um die Eigenschaften einer Modelländerung zu überwachen, sollten Sie verwenden. $ watch () , und nimmt die eckigen {{}} -Klammern aus der Eigenschaft an, 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);

    }
  };
});
36
j8io

Ich hoffe, dass dies dazu beitragen wird, die Anweisung zum Wert aus dem übergeordneten Bereich neu zu laden/zu aktualisieren 

<html>

        <head>
            <!-- version 1.4.5 -->
            <script src="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>
1
Abdul
angular.module('app').directive('conversation', function() {
    return {
        restrict: 'E',
        link: function ($scope, $Elm, $attr) {
            $scope.$watch("some_prop", function (newValue, oldValue) {
                  var typeId = $attr.type-id;
                  // Your logic.
            });
        }
    };
}
0
Gelio

Wenn Sie sich unter AngularJS 1.5.3 oder neuer befinden, sollten Sie in Betracht ziehen, anstelle von Direktiven zu Komponenten zu wechseln .. Diese funktionieren sehr ähnlich wie Direktiven, weisen jedoch einige nützliche Zusatzfunktionen auf, wie z. B. $ onChanges (changesObj) Der Lebenszyklus-Hook, der aufgerufen wird, wenn Einwegbindungen 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 sind die docs für vertiefte Komponenten.

0
voodoo_patch