Question

我正在尝试创建工具栏和toolbaritem指令。基本上工具栏是一个容器并且包含toolbaritems（在这种情况下为按钮）。有关工具项目数量，每个项目上的文本及其在单击时的行为的信息都在toolbaritem指令的外部，并使用模型关联。我可以在toolbaritem上设置文本，但无法动态添加行为。以下是代码：

的index.html

<body ng-app="app" ng-controller="myActionCtrl">
<action-toolbar actions="actionItems"></action-toolbar>
</body>

Controller.js

app.controller('myActionCtrl', ['$scope', function ($scope) {
var actionItems = [{ "name": "Post", "action": "Post()" }, 
                   { "name": "Recall", "action": "Recall()" },
                   { "name": "Signoff", "action": "Signoff()" }, 
                   { "name": "Attach", "action": "Attach()" }
                  ];
$scope.actionItems = actionItems;
$scope.Post = function () { alert('Post clicked'); }
$scope.Recall = function () { alert('Recall clicked'); }
$scope.Signoff = function () { alert('Signoff clicked'); }
$scope.Attach = function () { alert('Attach clicked'); }
}]);

directive.js

app.directive('actionToolbar', function () {
return {
    restrict: 'E',
    scope: {actions:'='},
    template: '<div ng-repeat="item in actions">'+
                        '<action-item name={{item.name}} action={{item.action}}>         </action-item>' + '</div>'
  };

});


app.directive('actionItem', function () {
return {
    restrict: 'E',
    scope:{name:'@',action:'@'}, //will discuss on this below
    template: "<button>{{name}}</button>",
    link: function (scope, element) {
        element.bind('click', scope.action);
    }
  }
});

使用上面的代码，它给出了一个“未定义不是函数”的错误。我假设这是因为scope.action被读作actionItem隔离范围中的字符串。出现此错误，尝试将isolatedscope参数修改为范围：{name:'@',action:'&'}，然后投诉

[$parse:syntax] Syntax Error: Token 'item.action' is unexpected, expecting [:] at column 3 of the expression [{{item.action}}] starting at [item.action}}]

Answer 1

除非您有理由在作用域上放置Post，Recall，Signoff和Attach功能，否则不要这样做。 actionItems数组中的对象可以存储对这些函数的直接引用，如

app.controller('myActionCtrl', ['$scope', function ($scope) {
var actionItems = [{ "name": "Post", "action": Post }, 
                   { "name": "Recall", "action": Recall },
                   { "name": "Signoff", "action": Signoff }, 
                   { "name": "Attach", "action": Attach }
                  ];
$scope.actionItems = actionItems;
function Post () { alert('Post clicked'); }
function Recall () { alert('Recall clicked'); }
function Signoff () { alert('Signoff clicked'); }
function Attach () { alert('Attach clicked'); }
}]);

工具栏指令上的action属性应该是一个表达式，它将调用你想要调用的函数，如下所示

app.directive('actionToolbar', function () {
return {
    restrict: 'E',
    scope: {actions:'='},
    template: '<div ng-repeat="item in actions">'+
    '<action-item name={{item.name}} action="item.action()">' +
    '</action-item>' + 
    '</div>'
  };
});

然后在您的actionItem指令中，您可以使用＆amp;绑定到隔离范围对象中的该表达式。策略，并将该函数设置为链接函数中的回调函数，如此

app.directive('actionItem', function () {
return {
    restrict: 'E',
    scope:{
        name:'@',
        action:'&'
    }, 
    template: "<button>{{name}}</button>",
    link: function (scope, element) {
        element.bind('click', scope.action)
    }
  }
});

在这里工作小提琴http://jsfiddle.net/r9rve69p/

父指令如何向angularjs中的子指令添加行为

的index.html

Controller.js

directive.js

1 个答案: