为什么我无法访问正确的范围? [英] Why I can't access the right scope?
本文介绍了为什么我无法访问正确的范围?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
html:
<头><身体><div ng-app="项目"><div ng-controller="mainCtrl">{{ 财产 1 }}<br/>{{ 财产 2 }}<div class="ts" d-child property1="{{ property1 }}cloud" property2="property2">属性 1:{{ 属性 1 }}<br/>属性 2:{{ 属性 2 }}</html>
js:
angular.module('project', []).controller('mainCtrl', function($scope) {$scope.property1 = 'ss';$scope.property2 = 'dd';});angular.module('项目').directive('dChild', function() {返回 {限制:'A'，范围: {属性 1: '@',属性 2: '='},链接:函数(范围，元素，属性){}//模板:'<input type="text" ng-model="property1"/>'}})我以为 property1: {{ property1 }} 会是property1: sscloud"，但结果是ss"，好像它仍然指的是 mainCtrl 控制器，不应该是 d-child 指令的作用域吗?
如果我在指令中使用模板，它确实引用了正确的范围并显示了sscloud"，谁能告诉我为什么?
解决方案
当 angular 编译一个具有隔离作用域的元素时，它有一些规则:
- 如果指令没有模板属性(或 templateUrl)，则内部内容附加到父作用域.实际上在这个提交之前，内部内容正在得到孤立的范围.检查您的示例以确认它适用于小于 1.2 的版本
- 如果指令确实具有模板属性，那么它将覆盖内部内容(除非被嵌入).
- 仅当您使用嵌入时，内部内容才会附加到同级作用域(非隔离).
- angular 以这种方式工作的原因是让可重用组件松散耦合，并且不会对您的应用程序产生任何副作用.
- 没有隔离范围的指令不会从同一元素上的隔离指令获得隔离范围(查看重要提交).
- 指令的模板无论如何都会获得隔离的范围.
如果你想改变这个行为，你可以像这样将隔离的作用域传递给嵌入函数:
angular.module('project').directive('dChild', function() {返回 {限制:'A'，转置:真实，范围: {属性 1: '@',属性 2: '='},链接:函数(范围、元素、属性、ctrl、链接器){链接器(范围，功能(克隆，范围){element.append(克隆)})}}})我强烈建议您查看这些教程:
并阅读更多内容:
html:
<!doctype html>
<html>
<head>
</head>
<body>
<div ng-app="project">
<div ng-controller="mainCtrl">
{{ property1 }}
<br />
{{ property2 }}
<div class="ts" d-child property1="{{ property1 }}cloud" property2="property2">
property1: {{ property1 }}
<br />
property2: {{ property2 }}
</div>
</div>
</div>
</body>
</html>
js:
angular.module('project', [])
.controller('mainCtrl', function($scope) {
$scope.property1 = 'ss';
$scope.property2 = 'dd';
});
angular.module('project')
.directive('dChild', function() {
return {
restrict: 'A',
scope: {
property1: '@',
property2: '='
},
link: function(scope, element, attrs) {
}
// template: '<input type="text" ng-model="property1" />'
}
})
I thought the property1: {{ property1 }} would be "property1: sscloud",but it turns out to be "ss",as if it still refers to the scope of the mainCtrl controller, shouldn't it be refer the scope of the d-child directive?
if I use template in the directive,it does refer to the right scope and shows 'sscloud',anyone can tell me why?
解决方案
When angular compiles an element with isolated scope it has some rules:
- If directives has no template property (or templateUrl), the inner content is attached to the parent scope. Actually before this commit, inner contents were getting the isolated scope. check your example to confirm it works on versions less than 1.2
- If directives do have a template property then it would override the inner content (unless trancluded).
- Only when you use a transclusion, then the inner content is attached to a sibling scope (non isolated).
- The reason why angular works this way is to let reusable components be loosely coupled, and not have any side effects on your application.
- Directives without isolate scope do not get the isolate scope from an isolate directive on the same element (see important commit).
- Directive's template gets the isolated scope anyways.
If you want to alter this behavior you can pass the isolated scope to the tranclusion function like so:
angular.module('project')
.directive('dChild', function() {
return {
restrict: 'A',
transclude: true,
scope: {
property1: '@',
property2: '='
},
link: function(scope, element, attrs, ctrl, linker) {
linker(scope, function(clone, scope){
element.append(clone)
})
}
}
})
I highly recommend you to see these tutorials:
And to read more:
- Access directive's isolate scope from within transcluded content
- https://github.com/angular/angular.js/wiki/Understanding-Scopes
这篇关于为什么我无法访问正确的范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
