Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS Transclusion Directive with ngRepeat导致混合范围大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
AngularJS有一个超级漂亮的ngTransclude指令,它用控制器模板中的html替换指令模板中的html.如果在指令中使用隔离范围,则可以使用NgTransclude从控制器范围访问变量.

当我最终看到一个看似随机的结果时,我试图这样做. ngRepeat中的ngTransclude从指令的作用域返回值,而不是控制器的作用域.

关闭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'];
      }
    };
  });

的index.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>

我-dialog.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,"Bridges"]!
Bridges
check out the contents,"Funke"]!

根据我读过的文档,以及我发现的用于翻译和范围的翻译和范围文章,翻译只应该虑到控制器的范围,意思是中间的两个“查看内容,{{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,"Funke"]!
jeff
check out the contents,"Funke"]!
Bridges
check out the contents,"Funke"]!

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

解决方法

@H_801_47@ 从1.3.0b11的 changelog

对于ng-if也是一样的(在你的plunker中在1.2.15和1.3.0-rc.1之间切换时有相同的奇怪的不同行为).

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

大佬总结

以上是大佬教程为你收集整理的AngularJS Transclusion Directive with ngRepeat导致混合范围全部内容,希望文章能够帮你解决AngularJS Transclusion Directive with ngRepeat导致混合范围所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。