Question

我正在阅读angularjs的开发者指南，我对代码有一些疑问 https://docs.angularjs.org/guide/directive

angular.module('docsTimeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.format = 'M/d/yy h:mm:ss a';
  }])
  .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {

    function link(scope, element, attrs) {
      var format,
          timeoutId;

      function updateTime() {
        element.text(dateFilter(new Date(), format));
      }

      scope.$watch(attrs.myCurrentTime, function(value) {
        format = value;
        updateTime();
      });

      element.on('$destroy', function() {
        $interval.cancel(timeoutId);
      });

      // start the UI update process; save the timeoutId for canceling
      timeoutId = $interval(function() {
        updateTime(); // update DOM
      }, 1000);
    }

    return {
      link: link
    };
  }]);

<div ng-controller="Controller">
  Date format: <input ng-model="format"> <hr/>
  Current time is: <span my-current-time="format"></span>
</div>

＆＃34;格式＆＃34;在my-current-time =＆＃34;格式＆＃34;绑定到格式模型？因为my-current-time =＆＃34;格式＆＃34;不是我的当前时间=＆＃34; {{format}}＆＃34;。那怎么做？

function updateTime() {
   element.text(dateFilter(new Date(), format));
}

了解控制器中的$ scope.format？＆＃34;格式＆＃34;变量应该引用链接函数中新创建的变量，但我不知道该变量如何绑定到Controller中的$ scope.format。

Answer 1

所以（据我所知）指令中的属性可以通过以下方式工作：

通过双向绑定表达式（'='在隔离范围对象中使用; 表达式必须是左手值/可分配的）
通过单向绑定表达式（隔离范围对象中使用的'&';表达式不必是左手值/可赋值）
通过插值字符串（隔离范围对象中使用的'@'）
通过字符串值（通常来自属性对象，也可以来自元素或jQuery或其他任何东西 - 但它不再是此时“角度方式”的一部分;隔离范围对象可能存在也可能不存在）。如果采用此选项，指令程序员也可以选择$observe属性，或者，在这种情况下，$watch。

如果我的控制器中某处有$scope.a = 123，则取决于程序员如何连接指令/属性，我可能会my-attribute="a"或my-attribute="{{a}}"或属性可能不会除了视图中实际存在的任何字符串外，接受任何内容。

在这种情况下，字符串为$watch - 编辑：

// attrs is the attributes object I mention in bullet point 4.
// myCurrentTime is camel-case for hypenated-snake-case my-current-time; 
// Angular does this conversion for you automatically.
scope.$watch(attrs.myCurrentTime, function(value) {
  format = value;
  updateTime();
});

每当$digest周期发生（通常每次发生变化）都涉及scope时，将执行提供的function，然后更新时间。

我希望有所帮助。

Answer 2

以下格式仍然是本地变量格式。 newFormatValue是$ scope.format的新值：

  ...
  scope.$watch(attrs.myCurrentTime, function(newFormatValue) {
    format = newFormatValue;
    updateTime(value);
  });

在这种情况下， attrs.myCurrentTime 是 my-current-time属性的值，即＆＃34; 格式＆＃34 ;.

$ watch（）的第一个参数是针对 $ scope context 评估的表达式;因此，当角度评估＆＃34;格式＆＃34;它确实看到＆＃34; $ scope.format＆＃34;。 当观察到的表达式的结果发生更改时，侦听器（第二个参数）将被执行。

您需要存储＆＃39; newFormatValue＆＃39;因为每1000毫秒你就有这个：

  ...
  // start the UI update process; save the timeoutId for canceling
  timeoutId = $interval(function() {
    updateTime(); // update DOM
  }, 1000);

它正在调用updateTime（）。并且格式可能在某个时间未定义。因此，使用newFormatValue设置格式会更新本地格式变量，并且每1000毫秒使用一次。

＆＃34;格式＆＃34;在my-current-time =＆＃34;格式＆＃34;绑定到格式模型？ 因为你的HTML有这个：

<input ng-model="format">

ng-model指令将以某种方式在此过程中调用 $ digest（）。当$ digest（）发生时，它会检查所有观察到的表达式。如果监视表达式的结果发生更改，则会执行侦听器。在你的情况下：

scope.$watch(attrs.myCurrentTime, listener)

听众是你的：

function(value(){}

属性值如何绑定到Controller中的范围？

2 个答案: