Angular Directive attrs.$observe

Question

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 attrs.$observe is actually doing.

I have looked in the docs but can't see $observe referenced anywhere.

The directive just seems to add the href which would come from the controller so can anyone explain what the rest of the code is doing?

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>

Here are the docs: http://docs.angularjs.org/api/ng/type/$compile.directive.Attributes — Ilan Frumer, Feb 21 '14 at 09:17

score 25 · Accepted Answer · edited May 23 '17 at 12:24

In short:

Everytime 'shareTwitterUrl' or 'shareTwitterText' changes, it will call the share function.

From another stackoverflow answer: (https://stackoverflow.com/a/14907826/2874153)

$observe() is a method on the Attributes object, and as such, it can only be used to observe/watch the value change of a DOM attribute. It is only used/called inside directives. Use $observe when you need to observe/watch a DOM attribute that contains interpolation (i.e., {{}}'s). E.g., attr1="Name: {{name}}", then in a directive: attrs.$observe('attr1', ...). (If you try scope.$watch(attrs.attr1, ...) it won't work because of the {{}}s -- you'll get undefined.) Use $watch for everything else.

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

$compile.directive.Attributes#$observe(key, fn);

Observes an interpolated attribute.

The observer function will be invoked once during the next $digest fol lowing compilation. The observer is then invoked whenever the interpolated value changes.

Will this value change though, I imagine it is just set once at the start of the app — ttmt, Feb 21 '14 at 09:29
Well that really depends how people choose use it ;) But there is another good reason for doing it this way. Lets say you get the **shareTwitterUrl** from a server, this will probably take som time, then you risk that **shareTwitterUrl** have not gotten its value before the directive is initiated. So when finally **shareTwitterUrl** gets its value, the directive will be updated with the correct value. — Erex, Feb 21 '14 at 09:47

score 1 · Answer 2 · answered Sep 03 '15 at 17:00

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

Angular Directive attrs.$observe

2 Answers2

Linked