Angularjs ng repeat在转置html中不起作用_Angularjs_Angularjs Directive

Angularjs ng repeat在转置html中不起作用

angularjs

Angularjs ng repeat在转置html中不起作用,angularjs,angularjs-directive,Angularjs,Angularjs Directive,请参考此代码。我正在尝试构建一个指令，它可以处理转置的html，但我不明白为什么ng repeat不能在其中工作。很少有人在Angular的git repo中发布与此相关的bug。任何帮助都会很好。谢谢 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-simpleTranscludeExample-pr

请参考此代码。我正在尝试构建一个指令，它可以处理转置的html，但我不明白为什么ng repeat不能在其中工作。很少有人在Angular的git repo中发布与此相关的bug。任何帮助都会很好。谢谢

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


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>



</head>
<body ng-app="transcludeExample">
  <script>
  angular.module('transcludeExample', [])
   .directive('pane', function(){
      return {
        restrict: 'E',
        transclude: true,
        scope: { title:'@' },
        template: '<div style="border: 1px solid black;">' +
                    '<div style="background-color: gray">{{title}}</div>' +
                    '<ng-transclude></ng-transclude>' +
                  '</div>'
      };
  })
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.title = 'Lorem Ipsum';
    //$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
    $scope.elements = ['Neque porro quisquam est qui dolorem ipsum quia dolor...',
    'Neque porro quisquam est qui dolorem ipsum quia dolor...',
    'Neque porro quisquam est qui dolorem ipsum quia dolor...'];

  }]);
</script>
<div ng-controller="ExampleController">
  <pane title="{{title}}">
    <li ng-repeat="element in elements">{{element}}</li>
  </pane>
</div>
</body>
</html>


示例-示例simpleTranscludeExample生产
angular.module（'transcludeExample'，[]）
.directive（'窗格'，函数（））{
返回{
限制：'E'，
是的，
作用域：{title:'@'}，
模板：“”+
“{{title}}”+
'' +
''
};
})
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.title='Lorem Ipsum'；
//$scope.text='Neque porro quisquam est qui dolorem ipsum quia dolor…'；
$scope.elements=['Neque porro quisquam est qui dolorem ipsum quia dolor…'，
“这是我的责任……”，
“这是我的责任……”；
}]);
{{element}

如果打开浏览器控制台，您将看到一个错误

错误：[ngRepeat:dupes]

，这意味着您的阵列中不能有重复项。将同一字符串在数组中放置3次，这就是重复不起作用的原因，请尝试使用不同的值或将ng repeat更改为如下所示：

<li ng-repeat="element in elements track by $index">{{element}}</li>

{{element}

这样，元素将通过其索引而不是其值进行跟踪

有关详细信息：

如果打开浏览器控制台，您将看到一个错误

错误：[ngRepeat:dups]

，这意味着您的阵列中不能有重复项。将同一字符串在数组中放置3次，这就是重复不起作用的原因，请尝试使用不同的值或将ng repeat更改为如下所示：

<li ng-repeat="element in elements track by $index">{{element}}</li>

{{element}

这样，元素将通过其索引而不是其值进行跟踪

有关更多信息：