我有一个在我的动态控制器上运行的ApplicationController 此应用程序控制器有一个数组,它是我的App-bar操作。
好吧,每个动态控制器我都继承了改变这个数组的能力,一旦它在$ scope.headers.actions上;
我现在要做的就是创建一个指令,我可以动态地在这个属性定义中添加角度属性(ng-class,ng-if等等)将来自$ scope.headers.actions [...]。attributes
现在我的指示是:</ p>
app.directive('ngDynamicAttrs', ['$compile',function ($compile) {
return {
scope: { list: '=ngDynamicAttrs' },
//priority: 1001,
//terminal: true,
link: function (scope, elem, attrs) {
for (attr in scope.list) {
attrs.$set(attr, scope.list[attr]);
//elem[0].setAttribute(attr, scope.list[attr]);
//elem.attr(attr, scope.list[attr]);
}
$compile(elem)(scope);
}
};
}]);
我的HTML是:
<ul class="actions">
<li class="action" ng-repeat="action in header.actions.pool" ng-click="action.events.click()" ng-dynamic-attrs="action.attributes" id="{{action.id}}">
<i ng-if="action.icon" class="icon fa {{action.icon}}"></i>
{{action.name}}
</li>
</ul>
我的行动对象是:
$scope.header = {
actions: {
pool: [],
clear: function (actions) {
$scope.header.actions.pool = [];
},
set: function (actions) {
$scope.header.actions.clear();
for (i in actions) {
$scope.header.actions.add(actions[i].id, actions[i].name, actions[i].icon, actions[i].events, actions[i].items, actions[i].attributes)
}
},
add: function (id, name, icon, events, items, attributes) {
$scope.header.actions.pool.push($scope.header.actions.create(id, name, icon, events, items, attributes));
},
remove: function (id) {
for (i in $scope.header.actions.pool) {
if ($scope.header.actions.pool[i].id == id) delete $scope.header.actions.pool[i];
}
},
create: function (id, name, icon, events, items, attributes) {
return { id: id, name: name, icon: icon, events: events, items: items, attributes: attributes };
}
}
}
注意:我甚至没有在这里考虑这些事件,因为一旦我可以轻松使用普通的dom事件,这并不是什么大不了的事。