gpt4 book ai didi

带有 ng Repeat 的 AngularJS 嵌入指令导致混合范围

转载 作者:行者123 更新时间:2023-12-04 21:15:03 24 4
gpt4 key购买 nike

AngularJS 有一个 super 漂亮的 ngTransclude 指令,它将指令模板中的 html 替换为 Controller 模板中的 html。如果您在指令中使用隔离范围,则可以使用 ngTransclude 从 Controller 范围访问变量。

当我最终得到一个看似随机的结果时,我试图这样做。 ngRepeat 中的 ngTransclude 从指令的范围而不是 Controller 的范围返回值。

离开 AngularJS 文档,我创建了一个 Plunker:http://plnkr.co/edit/GtrYtGoy2fnvgkwLFAGN?p=preview

JS

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.names = ['Tobias', 'Funke'];
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function (scope, element) {
scope.names = ['Jeff', 'Bridges'];
}
};
});

索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example87-production</title>


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="script.js"></script>



</head>
<body ng-app="docsTransclusionExample">
<div ng-controller="Controller">
<my-dialog>Check out the contents, {{names}}!</my-dialog>
</div>
</body>
</html>

我的对话框.html
<div class="alert" ng-transclude></div>
<div ng-repeat="name in names">
<div class="alert" ng-transclude></div>
{{name}}
</div>
<div class="alert" ng-transclude></div>

此代码返回:
Check out the contents, ["Tobias","Funke"]!
Check out the contents, ["Jeff","Bridges"]!
Jeff
Check out the contents, ["Jeff","Bridges"]!
Bridges
Check out the contents, ["Tobias","Funke"]!

根据我读过的文档,以及我为嵌入和作用域找到的这篇嵌入和作用域文章,嵌入应该只包含 Controller 的作用域,意思是中间两个“检查内容,{{names}}!”应该和外面的两个读起来一样。

进一步的实验让我将 AngularJS 版本从 1.2.15 更改为 1.3.0 rc
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>

这导致正确的(据我所知)输出:
Check out the contents, ["Tobias","Funke"]!
Check out the contents, ["Tobias","Funke"]!
Jeff
Check out the contents, ["Tobias","Funke"]!
Bridges
Check out the contents, ["Tobias","Funke"]!

我可以在 1.2.15 中使用此问题的解决方法,还是在使用此版本时卡住了?正确的行为应该是什么?

最佳答案

来自 changelog 1.3.0b11:

ngRepeat: ensure that the correct (transcluded) scope is used (b87e5fc0)



同为 ng-if (在您的plunker 中在 1.2.151.3.0-rc.1 之间切换时具有相同的奇怪的不同行为)。

所以正确的是使用 1.3.0-rc.1 .

关于带有 ng Repeat 的 AngularJS 嵌入指令导致混合范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25895196/

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