向dom元素

时间:2015-09-23 11:31:21

标签: angularjs dynamic attributes directive

我有一个在我的动态控制器上运行的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事件,这并不是什么大不了的事。

0 个答案:

没有答案