Angular 个重复问题

Question

我有这个控制器：

app.controller('HomeController', function($scope) {

$scope.buttonList = [
    {
        href: "http://ciao.html",
        cssClass: "",
        iconBeforeCssClass: "",
        labelCssClass: "",
        labelText: "ciao",
        iconAfterCssClass: "",
    },

    {
        href: "ciao2.html",
        cssClass: "",
        iconBeforeCssClass: "",
        labelCssClass: "",
        labelText: "ciao2",
        iconAfterCssClass: "",
    }                
];

});

这个指令：

app.directive('widgetButtonList', function() {
var directive = {};

directive.restrict = 'E';
directive.replace = false;

directive.templateUrl = 'modules/directives/widget-button-list.html';

directive.scope = {
    additionalCssClass: "@",      
    buttons : "@",
};

return directive; });

模板如下：

<div class="ap-block ap-button-list-block {{additionalCssClass}}">           
<ul>
    <li ng-repeat="btn in buttons track by $index">                 
        <a href="{{btn.href}}" class="{{btn.cssClass}}">
            <i class="ap-button-list-before-icon {{btn.iconBeforeCssClass}}" ></i>
            <span class="ap-button-list-label {{btn.labelCssClass}}">{{btn.labelText}}</span>
            <i class="ap-button-list-after-icon {{btn.iconAfterCssClass}}" ></i>
        </a>
    </li>
</ul>

而且视图是这样的：

 <div ng-controller="HomeController">
   <widget-button-list buttons="{{buttonList}}"></widget-button-list>

但是要按照我的预期呈现两次模板按钮，它会打印 250 次小部件的模板而不绑定任何内容。有人可以帮帮我吗？？

Answer 1

您需要使用不同的隔离范围属性而不是使用文本绑定来传递 buttonsList。指令定义对象上的 @ 符号表示您将传递一个字符串，而实际上您传递的是一个对象数组。试试这个：

directive.scope = {
    additionalCssClass: "@",      
    buttons : "=" //instead of @
};

<widget-button-list buttons="buttonList"></widget-button-list>

Plunker Demonstration

为了完整起见，您可以将 buttonsList 作为字符串传递，但您必须注意，在指令中您将收到 JSON细绳。然后你需要在指令中解析它：

directive.scope = {
  additionalCssClass: "@",
  buttons: "@"
};

directive.controller = function($scope) {
  $scope.btns = JSON.parse($scope.buttons);
}

我不建议使用第二种方法，但这里还有 Plunker Demonstration。

Angular 个重复问题

Angular ng-repeat issue

angularjs

angularjs-directive

angularjs-ng-repeat