Question

我正在尝试构建生成小部件。我相信我的代码问题是数组是空的，但ng-repeat仍然从指令返回代码。 This is small example of mine code，当您将item.html文件内容更改为<view>时，页面就会冻结。

的index.html

<div ng-repeat='item in obj.items'><item></div>

index.js

$scope.obj = {
    level: 1,
    items: [],
    views: []
};
directives.view = function(){
    return {
        templateUrl: "view.html"
    };
}
directives.item = function(){
    return {
        templateUrl: "item.html"
    };
}

item.html

<view>

view.html

<div ng-repeat='item in item.items'><item></div>

Answer 1

如果你的指令真的只是模板，你可能只想使用ng-include来考虑：

<div ng-repeat='item in obj.items' ng-include=" 'item.html' "></div>

Answer 2

plunker中有一些错误（请参阅下面的说明）。

这是固定的plunker：

http://plnkr.co/edit/fF8Z5JeHOr2XeNTCPkho?p=preview

<强>的index.html

  <body>
    <div class="container" ng-controller="ctr">
      <a ng-click="addItem()" class="btn btn-primary">ADD ITEM</a>
      <div ng-repeat="item in items">
        <item></item>
      </div>
    </div>
  </body>

<强> item.html

<hr/ >
<h3>{{item.name}}</h3>
<h5>{{item.date | date:'medium'}}</h5>

<强>的script.js

var app = angular.module('mainApp', []);

app.controller('ctr', function($scope, $sce) {

  $scope.items = [];

  var counter = 0;

  $scope.addItem = function() {

    var item = {
      name: ++counter,
      date: new Date()
    };

    $scope.items.push(item);
  }
});


app.directive('item', function() {
    return {
      restrict: 'E',
      templateUrl: 'item.html'
    };
  });

已修复错误：

Error: [$injector:modulerr] Failed to instantiate module ngSanitize

您需要包含此模块或将angular.module('mainApp',['ngSanitize'])更改为angular.module('mainApp',[])

同时添加，您的view.html包括他自己，例如

<div ng-repeat='item in item.items'><item></div>

这最终也会导致错误

角圆指令定义

2 个答案:

http://plnkr.co/edit/fF8Z5JeHOr2XeNTCPkho?p=preview