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。

角度ng重复问题

1 个答案: