角度ng重复问题

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演示

而且为了完整起见,你可以传入buttonsList一个字符串,但是你必须要知道在指令中你将收到一个JSON字符串.然后你需要在指令中解析它:

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

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

我不建议使用第二种方法,但这里也是Plunker演示.