角指令ATTRS。$观察 [英] Angular Directive attrs.$observe

问题描述

我发现这个角指令在线添加Twitter共享按钮。这一切似乎前进，但staright我不能工作了'ATTRS。$观察实际上是做什么的。

我看过的文档，但无法看到$观摩的任何地方引用。

该指令似乎只是要添加的将来自控制器中的href所以任何人都可以解释一下code的其余部分是干什么的？

  module.directive（'shareTwitter'，['$窗口'，函数（$窗口）{    返回{
        限制：'A'，
        链接：功能（$范围，元素，ATTRS）{            $ scope.share =功能（）{                VAR HREF ='https://twitter.com/share';                $ scope.url = attrs.shareUrl || $ window.location.href;
                $ scope.text = attrs.shareText ||假;                '？URL ='+ HREF = EN + codeURIComponent（$ scope.url）;
                如果（$ scope.text）{
                    HREF + ='和;文本='+ EN codeURIComponent（$ scope.text）;
                }                element.attr（'href属性中，href）;
            }            $ scope.share（）;            ATTRS。观察$（'shareUrl'，函数（）{
                $ scope.share（）;
            }）;            ATTRS。观察$（'shareText'，函数（）{
                $ scope.share（）;
            }）;
        }
    }
}]）;
LT＆; A HREF =TARGET =_空白共享Twitter共享-URL =[[shareTwitterUrl]]共享文本=[[shareTwitterText]＆GT; Twitter的＆LT; / A＆GT;
 

解决方案

简而言之：

每次'shareTwitterUrl'或'shareTwitterText的变化，它会调用共享功能。

从另一个计算器回答：（<一个href=\"http://stackoverflow.com/a/14907826/2874153\">http://stackoverflow.com/a/14907826/2874153)

  

$注意（）是一个方法的Attributes对象，正因为如此，它可以
  仅可用于观察/看DOM属性的值的变化。它
  仅用于/被叫内部指令。使用$当你需要观察
  观察/表包含插值DOM属性（即，
  {{}}的）。例如，ATTR1 =姓名：{{名}}，然后在指令：
  ATTRS。观察$（'ATTR1'，...）。 （如果您尝试范围。$腕表（attrs.attr1，
  ...），它不会因为{{}}的S工作 - 你会得到未定义）使用
  $留意一切。

从角文档：（ HTTP ：//docs.angularjs.org/api/ng/type/$compile.directive.Attributes 的）

  

的 $ compile.directive.Attributes＃$观察（键，FN）; 的

  
  

观察内插的属性。

  
  

观察员功能将在未来消化$阶逻辑调用一次
  降脂编译。然后观察员在调用每当插补值的变化。

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>

解决方案

In short:

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

From another stackoverflow answer: (http://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.

这篇关于角指令ATTRS。$观察的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！