Question

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>

MY-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, ["Jeff","Bridges"]!
Bridges
Check out the contents, ["Tobias","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, ["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，还是在使用此版本时卡住了？应该是什么样的正确行为？

Answer 1

来自1.3.0b11的changelog：

ngRepeat ：确保使用正确的（已转换的）范围（b87e5fc0）

ng-if 相同（在您的plunker中切换1.2.15和1.3.0-rc.1时，奇怪的具有相同的行为）。

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

AngularJS Transclusion Directive with ngRepeat导致混合范围

1 个答案: