gpt4 book ai didi

angularjs - 为什么我无法访问正确的范围?

转载 作者:行者123 更新时间:2023-12-02 22:31:11 24 4
gpt4 key购买 nike

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" />'
}
})

我以为property1: {{ property1 }}会是“property1: sscloud”,但结果是“ss”,好像它仍然引用 mainCtrl 的范围 Controller ,不应该引用 d-child 的范围吗?指令?

如果我在指令中使用模板,它确实引用了正确的范围并显示“sscloud”,任何人都可以告诉我为什么?

最佳答案

当 Angular 编译具有隔离范围的元素时,它有一些规则:

  • 如果指令没有模板属性(或 templateUrl),则内部内容将附加到父范围。其实之前this commit ,内部内容得到隔离范围。检查您的示例以确认它适用于低于 1.2
  • 的版本
  • 如果指令确实具有模板属性,那么它将覆盖内部内容(除非被嵌入)。
  • 仅当您使用嵌入时,内部内容才会附加到同级范围(非隔离)。
  • Angular 之所以以这种方式工作,是为了让可重用组件松散耦合,而不会对您的应用程序产生任何副作用。
  • 没有隔离范围的指令无法从同一元素上的隔离指令获取隔离范围 ( see important commit )。
  • 指令的模板无论如何都会获得隔离的范围。
<小时/>

如果您想改变此行为,您可以将隔离范围传递给嵌入函数,如下所示:

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

我强烈建议您查看这些教程:

并阅读更多内容:

关于angularjs - 为什么我无法访问正确的范围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21014134/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com