动态添加 ui-sref 到一个元素

Question

我有以下指令

.directive('famAction', function () {

        var directive = {
            restrict: 'A',
            scope: {action: '='},
            link: link
        };

        function link(scope, element) {
            if (scope.action.hasOwnProperty('state')) {
                element.attr('ui-sref', scope.action.state);
            }
            if (scope.action.hasOwnProperty('func')) {
                element.bind('click', scope.action.func);
            }
        }

        return directive;
    })

问题是，当添加 ui-sref 属性时，属性不是 compiled ant 因此我没有生成器 href标签，所以 link 不起作用。

如何动态添加一个 ui-sref 属性到一个元素然后编译它？

我什至尝试过，但没有成功：

 .directive('famAction', function () {

        var directive = {
            restrict: 'A',
            scope: {action: '='},
            compile: compile
        };

        function compile(tElement, tAttrs) {
            return {
                pre: function preLink(scope, element, attrs) {
                    if (scope.action.hasOwnProperty('state')) {
                        element.attr('ui-sref', scope.action.state);
                    }
                },
                post: function postLink(scope, element, attrs) {
                    if (scope.action.hasOwnProperty('func')) {
                        element.bind('click', scope.action.func);
                    }
                }
            };
        }

        return directive;
    })

PS：我的 action 对象可以是以下之一：

{state: 'app.flaws.relevant', icon: 'chain-broken'}
{func: vm.ignoreFlaw, icon: 'ambulance'}

Answer 1

您不能向当前正在编译的元素添加指令！原因是 Angular 已经已经解析了它并提取了要编译的指令。相反，如果您想将属性指令添加到内部元素，您应该在 compile 函数中执行（而不是在 preLink 中 - 模板具有已经在那里编译，添加该属性将无效）。对于这种情况，您想要访问范围，它将不起作用：compile 无法访问范围（尚未创建）。

在你的情况下你能做什么？

手动编译：

从 famAction 指令的模板中删除具有 ui-sref 的元素。

在pre-或postLink中，使用$compile编译包含ui-sref的元素的模板，即类似的东西的：

var uiSrefElem = $compile( '<button ui.sref="' + scope.action.state + '">Go!</button>' );

将此 uiSrefElem 添加到指令的元素中。

程序化导航：在使用 $state.go(scope.action.state) 的 scope/controller 中放置一个函数。单击指令元素时调用此函数。

我会选择 (2)。

动态添加 ui-sref 到一个元素

dynamically add ui-sref to an element

directive

angularjs