【问题标题】：AngularJS directive when template is rendered渲染模板时的AngularJS指令
【发布时间】：2023-08-11 15:27:01
【问题描述】：

我对何时呈现 AngularJS 指令中的“模板”感到有些困惑。见以下代码sn-ps：

<!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>

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

它显示“Hello First One”，这意味着控制器和链接函数中的第一条语句都没有更改范围内名称的值，或者更改未反映在模板中。

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

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

或通过使用“=”而不是“@”将“名称”更改为双向绑定

它呈现“Hello First ONE Second Second ！”正如预期的那样。

小偷是here

那么这是否意味着单向绑定，模板中的作用域变量在控制器和链接函数启动之前呈现？

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

只要改变这个：

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

到这里：

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

还有这个：

scope: {
  name: "@"
},

到这里：

scope: {
  name: "="
},

它会起作用的。

更新：

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

@ 或 @attr - 将本地范围属性绑定到 DOM 属性的值。结果始终是字符串，因为 DOM 属性是字符串。如果未指定 attr 名称，则假定属性名称与本地名称相同。给定范围的小部件定义：{ localName:'@myAttr'}，然后小部件范围属性 localName 将反映 hello {{name}} 的插值。随着 name 属性的变化，小部件范围上的 localName 属性也会发生变化。名称是从父作用域（不是组件作用域）读取的。

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

【讨论】：

我在我的问题中提到，更改为双向绑定将使其工作。只想知道背后的原因。