Angular Js ng-repeat with custom directive templateUrl

时间:2017-02-17 06:47:30

标签: angularjs angularjs-directive custom-directive

我在带有模板网址的角度js中使用自定义指令,代码链接为here。问题是如果我将ngRepeat传递给元素,ngRpeat不使用模板URL,那么它不起作用,但如果我传入模板本身就可以工作。

2 个答案:

答案 0 :(得分:1)

<强>更新

以下是您在main.html中编写的代码

<search-results customers-d ="customers" ng-repeat="CM in customersD></search-results>

以下是您编写的指令searchResults:

myApp.directive('searchResults', function () {
    return {
        templateUrl: 'directives/search.html',
        scope: {
            customersD: '=',
        }
    }
});

以下是您编写的主控制器:

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
    $scope.customers = [{ name:'Rishabh'},{name:'Krishna'}]
}]);

search.html如下:

<a href="#" class="list-group-item">
    <h4 class="list-group-item-heading"> hi </h4>
    <p class="list-group-item-text">{{CM.name}}</p>
</a>

现在你做错了事:

  1. 在main.html
  2. 的ng-repeat中缺少结束语
  3. 尝试访问main.html中的customersD,而在mainController的$ scope中没有定义名为customersD的数组。
  4. 尝试访问search.html中的CM(这是隔离范围指令的模板)。您只能在search.html中拥有customersD
  5. 我认为您对范围的理解不正确。如果你在这里提问之前读得够多,那将会很好。 :)

    上一个答案: 您缺少ng-repeat中的结束引用并使用错误的变量 请执行以下操作:

    <search-results customers-d ="CM" ng-repeat="CM in customers"></search-results>
    

答案 1 :(得分:0)

main.html中

<div class="list-group">
    <search-results customers-d ="customers" ng-repeat="CM in customers"></search-results>
</div>

app.js中的指令更改

myApp.directive('searchResults', function () {
return {
    restrict : "AE",
    templateUrl: 'directives/search.html'
}
});