Angular指令链接函数中的作用域是否与角度指令控制器中的$ scope相同？
[英]Is the scope in an Angular directive link function the same $scope in an angular directive controller?
问题描述
Javascript: 
使用Javascript：
angular
.module('app', [])
.directive('compileExample', compileExample);
function compileExample() {
return {
restrict: 'E',
scope: {},
compile: function(tElement, tAttrs) {
angular.element(tElement).append("My name is {{name}}");
},
controller: function($scope, $element) {
$scope.name = "Liam";
},
}
}
HTML: HTML：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>controllerVsLink</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="main.js"></script>
</head>
<body ng-app="app">
<compile-Example></compile-Example>
</body>
</html>
This works the way I would expect it, compile runs first and appends that template to the element, than controller changes name to become Liam so the view shows "My name is Liam". 这按我期望的方式工作，首先运行编译，然后将该模板附加到元素，然后控制器将名称更改为Liam，因此视图显示“我的名字是Liam”。 From reading the Angular docs link also runs after compile so why is it when i change the controller to a link function name never gets updated or shown in the view? 通过阅读Angular docs链接，该链接也会在编译后运行，所以当我将控制器更改为链接函数名称时，为什么它永远不会更新或显示在视图中，为什么会这样？
angular
.module('app', [])
.directive('compileExample', compileExample);
function compileExample() {
return {
restrict: 'E',
scope: {},
compile: function(tElement, tAttrs) {
angular.element(tElement).append("My name is {{name}}");
},
link: function(scope, element) {
scope.name = "Liam";
},
}
}
2 个解决方案
解决方案1
1 2016-02-19 00:06:47
An important difference between the directive linking function and the directive controller function is the way arguments are furnished. 指令链接功能和指令控制器功能之间的重要区别是参数的提供方式。
Controller function arguments are injected by name . 控制器函数参数按名称注入 。
//This will work
controller: function($element, $scope) {
$scope.name = "Liam";
},
//AND this will work
controller: function($http, $scope, $element) {
$scope.name = "Liam";
},
The controller function arguments are furnished by the $injector service and include all the AngularJS services as well as the locals $scope , $element , $attrs , and $transclude . 控制器函数参数由$injector服务提供，包括所有AngularJS服务以及本地用户$scope ， $element ， $attrs和$transclude 。
Link function arguments are furnished by position . 链接函数参数由position提供 。
//This will work
link: function(scope, element) {
scope.name = "Liam";
},
//This will FAIL
link: function(element, scope) {
scope.name = "Liam";
},
Link functions arguments are furnished by the $compile service by position and the names used by the arguments behave as function arguments normally do in JavaScript. $compile服务按位置提供链接函数参数，并且参数使用的名称的行为与JavaScript中通常使用的函数参数相同。
For more information on injected locals , see AngularJS $compile Service API Reference -- controller . 有关注入的本地 变量的更多信息，请参见AngularJS $ compile Service API Reference-controller 。
For more information on injection by name , see this Stack Overflow Answer . 有关按名称进行注入的更多信息，请参见此堆栈溢出答案 。
解决方案2
0 已采纳 2016-02-18 19:57:16
看起来，如果您在指令定义对象中进行了编译，它将禁用您在编译外部指定的任何默认后链接函数。如果直接从编译器返回链接，则该链接仅对编译有效。经验可以阐述
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.