Angular Directive Attr. $ Beobachten

Question

Ich fand diese Winkeldirektive online, um einen Twitter-Share-Button hinzuzufügen. Es scheint alles nach vorne zu gehen, aber ich kann nicht herausfinden, was die attrs.$observe tatsächlich macht.

Ich habe in der Dokumentation gesucht, aber nirgends $observe verwiesen.

Die Richtlinie scheint nur die href hinzuzufügen, die von der Steuerung kommen würde, damit jeder erklären kann, was der Rest des Codes tut?

module.directive('shareTwitter', ['$window', function($window) { 

    return { 
     restrict: 'A', 
     link: function($scope, element, attrs) { 

      $scope.share = function() { 

       var href = 'https://twitter.com/share'; 

       $scope.url = attrs.shareUrl || $window.location.href; 
       $scope.text = attrs.shareText || false; 

       href += '?url=' + encodeURIComponent($scope.url); 
       if($scope.text) { 
        href += '&text=' + encodeURIComponent($scope.text); 
       } 

       element.attr('href', href); 
      } 

      $scope.share(); 

      attrs.$observe('shareUrl', function() { 
       $scope.share(); 
      }); 

      attrs.$observe('shareText', function() { 
       $scope.share(); 
      }); 
     } 
    } 
}]); 


<a href="" target="_blank" share-twitter share-url="[[shareTwitterUrl]]" share-text="[[shareTwitterText]]">Twitter</a> 

Answer 1

Kurz:

Everytime 'shareTwitterUrl' oder 'shareTwitterText' ändert, wird es die Share-Funktion aufrufen.

Aus einer anderen Stackoverflow Antwort: (https://stackoverflow.com/a/14907826/2874153)

beobachten $() ist eine Methode, auf die Attribute Objekt und als solches kann es nur dann verwendet werden, um die Wertänderung zu beobachten/watch ein DOM-Attribut Es wird nur Innenrichtlinien verwendet/genannt. Verwenden Sie $ observe, wenn Sie beobachten/beobachten ein DOM-Attribut, das Interpolation enthält (d. H. {{}} s). Zum Beispiel attr1 = "Name: {{Name}}", dann in einer Direktive: Attr. $ Beobachten ('attr1', ...). (Wenn Sie scope. $ Watch (attrs.attr1, ...) versuchen, wird es nicht funktionieren wegen der {{}} s - Sie werden undefined.) Verwenden Sie $ Uhr für alles andere.

Von Angular docs: (http://docs.angularjs.org/api/ng/type/$compile.directive.Attributes)

$ compile.directive.Attributes # $ beobachten (Schlüssel, fn);

Beachtet ein interpoliertes Attribut.

Die Observer-Funktion wird einmal während der nächsten $ digest fol lowing-Kompilierung aufgerufen. Der Beobachter wird dann aufgerufen, wenn sich der interpolierte Wert ändert.

Answer 2

<input type="text" ng-model="value" > 
<p sr = "_{{value}}_">sr </p> 


.directive('sr',function(){ 

return { 

     link: function(element, $scope, attrs){ 
       attrs.$observe('sr', function() { 
           console.log('change observe') 
        }); 
      } 
    }; 
})