我对于AngularJS指令中'模板'呈现时有点困惑。请参见下面的代码片段：AngularJS指令在模板呈现时

<!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首先一号”，这意味着没有在控制器和链接功能的第一条语句的改变的值名称范围内，或者更改未反映在模板中。

但是，如果我改变了指令

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

或变“名”，以双向使用“=”，而不是结合“@”

它呈现“你好第一个秒秒！”如预期。

的plunker是here

所以它意味着一个双向绑定，在模板范围VAR之前被渲染器和链接功能在踢？

来源

2014-12-03 MichaelYu

只要改变这一点：

<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}}的内插值。由于名称属性发生变化，widget属性的localName属性也会发生变化。该名称是从父作用域（不是组件作用域）读取的。

通知的最后一部分：The name is read from the parent scope (not component scope)

来源

2014-12-03 09:04:15

我已经在我的问题提到，转变为双向绑定将使它发挥作用。只是想知道背后的原因。 – MichaelYu 2014-12-03 09:22:42

检查编辑答案。 – 2014-12-03 10:09:08

我认为这是相当自我解释现在，谢谢 – MichaelYu 2014-12-08 08:52:54

AngularJS指令在模板呈现时

回答

更新：

相关问题