角度指令 attrs.$observe

Question

我在网上找到了这个 Angular 指令来添加一个 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' 改变时，都会调用 share 函数。

来自另一个 stackoverflow 答案： (https://stackoverflow.com/a/14907826/2874153)

$observe() 是 Attributes 对象上的一个方法，因此，它可以 仅用于观察/观察 DOM 属性的值变化。它 仅在指令内部使用/调用。需要时使用 $observe 观察/观察包含插值的 DOM 属性（即， {{}}）。例如，attr1="Name: {{name}}"，然后在指令中： attrs.$observe('attr1', ...)。 （如果你尝试 scope.$watch(attrs.attr1, ...）由于 {{}}，它不会起作用——你会得到未定义的。）使用 $watch 其他一切。

来自 Angular 文档： (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')
                    });
            }
    };
})