如何在指令模板 Angular JS 中使用 ng-repeat

Question

我在显示我的控制器传递给指令模板的 JSON 对象数据时遇到问题。这是我的代码。

指令

app.directive('heroes', function(){
    return{
        scope:{
            heroes: '='
        },
        template: '<li ng-repeat="x in hereos">{{ x.Name }} </li>', // DOESNT WORK
        link:function(scope,element,attributes){

            });
        }
    }
});

控制器

app.controller('MainController',function($scope, $http){
    $scope.getData = function(){
          $http({
              url: 'js/directives/herolist.php',
              method: "GET"
        }).success(function (data) { $scope.heroes = data.records; })

    }

Answer 1

Working Plunkr

您应该在 HTML 中包含该指令并稍微重命名您的值

html 可以是

 <heroes data="heroes"></heroes>

那么在你的指令中你会做

 scope:{
        heroes: '=data' 
    }

如果您执行 heroes: "=" 并且您没有将指令限制为一个元素，那么您基本上包含了该指令两次（您不希望这样）。如果你确实想使用 heroes 作为属性，像这样

<heroes heroes="heroes"></heroes>

然后添加

restrict: "E"

根据您的指示。

如何在指令模板 Angular JS 中使用 ng-repeat

How to use ng-repeat inside a directive template Angular JS

angularjs

ng-repeat