Question

我在网上找到了这个Angular Directive来添加一个twitter分享按钮。这一切似乎都是明星前进，但我无法弄清楚attrs.$observe实际上在做什么。

我查看了文档，但无法在任何地方看到$observe。

该指令似乎只是添加了来自控制器的href，所以任何人都可以解释其余代码在做什么吗？

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

简而言之：

每次'shareTwitterUrl'或'shareTwitterText'更改时，都会调用共享函数。

来自另一个stackoverflow回答：（https://stackoverflow.com/a/14907826/2874153）

$ observe（）是Attributes对象的一个方法，因此它可以仅用于观察/观察DOM属性的值更改。它仅在指令内使用/调用。需要时使用$ observe 观察/观察包含插值的DOM属性（即 {{}}的）。例如，attr1 =“Name：{{name}}”，然后在一个指令中： attrs。$ observe（'attr1'，...）。（如果你尝试范围。$ watch（attrs.attr1， ...）它将无法工作，因为{{}} s - 你将得到未定义。）使用 $注意其他一切。

来自Angular docs：（http://docs.angularjs.org/api/ng/type/$compile.directive.Attributes）

$ compile.directive.Attributes＃$ observe（key，fn）;

观察插值属性。

观察者函数将在下一个$ digest fol中调用一次   降低汇编。只要内插值发生变化，就会调用观察者。

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

Angular Directive attrs。$观察

2 个答案: