更新

Question

我对模板＆＃39;模板的时间有点困惑。在AngularJS指令中呈现。请参阅以下代码段：

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS </title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <example-directive name="{{name}}"></example-directive>
  </body>

</html>

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'First ONE ';
});

app.directive('exampleDirective', function() {
  return {
    restrict: 'E',
    scope: {
      name: "@"
    },
    template: '<p>Hello {{name}}!</p>',
    controller: function($scope, $element){
      $scope.name = $scope.name + "Second ";
      $scope.name2 = $scope.name + "Second ";
    },
    link: function(scope, el, attr) {
      scope.name = scope.name + "Third ";
      $scope.name2 = $scope.name + "Second ";
    }
  }
})

＆＃13;

显示＆＃34; Hello First One＆＃34;这意味着控制器和链接函数中的第一个语句都不会更改范围中name的值，或者更改不会反映在模板中。

但是，如果我将指令更改为

template: '<p>Hello {{name2}}!</p>'

或更改＆＃39; name＆＃39;通过使用＆＃39; =＆＃39;进行双向绑定而不是＆＃39; @＆＃39;

它呈现＆＃34; Hello First ONE Second Second！＆＃34;如预期的那样。

the plunker是here

这对于单向绑定意味着什么，在控制器和链接函数启动之前渲染模板中的范围var？

Answer 1

只需改变一下：

<example-directive name="{{name}}"></example-directive>

到此：

<example-directive name="name"></example-directive>

和此：

scope: {
  name: "@"
},

到此：

scope: {
  name: "="
},

它会起作用。

更新

抱歉，因为没有阅读整个问题。这是docs中的内容：

@或@attr - 将本地范围属性绑定到DOM属性的值。结果总是一个字符串，因为DOM属性是字符串。如果未指定attr名称，则假定属性名称与本地名称相同。范围的给定和小部件定义：{localName：＆＃39; @ myAttr＆＃39;然后，窗口小部件范围属性localName将反映hello {{name}}的内插值。随着name属性的更改，widget命名空间上的localName属性也会更改。从父作用域（而不是组件作用域）读取名称。

注意最后一部分：The name is read from the parent scope (not component scope)

呈现模板时的AngularJS指令

1 个答案:

更新