title: Angular Directive attrs.$observe
body: <p>I found this Angular Directive online to add a twitter share button. It all seems staright forward but I can't work out what the <code>attrs.$observe</code> is actually doing.</p>
  
  <p>I have looked in the docs but can't see <code>$observe</code> referenced anywhere.</p>
  
  <p>The directive just seems to add the <code>href</code> which would come from the controller so can anyone explain what the rest of the code is doing?</p>
  
  <pre><code>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 += '&amp;text=' + encodeURIComponent($scope.text);
                  }
  
                  element.attr('href', href);
              }
  
              $scope.share();
  
              attrs.$observe('shareUrl', function() {
                  $scope.share();
              });
  
              attrs.$observe('shareText', function() {
                  $scope.share();
              });
          }
      }
  }]);
  
  
  &lt;a href="" target="_blank" share-twitter share-url="[[shareTwitterUrl]]" share-text="[[shareTwitterText]]"&gt;Twitter&lt;/a&gt;
  </code></pre>