Question

我有以下指令用于生成链接（以及其他内容）。我在这里简化了一下：

    oActivityModule.directive('activityDetails', function () {
            return {
                restrict: 'E',
                scope: {
                    activityLog: '@',
                },
                link: function(scope, element, attr) {
                    element.html(details(angular.fromJson(scope.activityLog)));
                }
            };
        });

        function details(oActivityLog) {
           return '<a sx-sref="channels.channel({channelID: ' + oActivityLog.channelId + '})">' + oActivityLog.name + '</a>';
        }
    }

问题是sx-sref标签没有编译成href标签，它看起来像在源html页面中：

<a sx-sref="channels.channel({channelID: 123})">A channel name</a>

我的路线和一切都设置得很好。我正在我的应用程序的其他部分使用sx-sref进行编译，但在这些情况下，sx-sref在模板html文件中，而不是角度指令js文件。

注意，上面的js指令文件中有很多逻辑（未显示）来生成链接的数据，这就是为什么我不能将链接放在HTML中。

也许它与element.html（...）调用有关？

element.html(details(angular.fromJson(scope.activityLog)));

Answer 1

解决方案是注入$ compile，将其作为参数传递给指令函数，然后在字符串上调用$ compile（...）（scope）：

       oActivityModule.directive('activityDetails', ['$compile' function ($compile) {
            return {
                restrict: 'E',
                scope: {
                    activityLog: '@',
                },
                link: function(scope, element, attr) {
                    $compile(element.html(details(angular.fromJson(scope.activityLog))))(scope);
                }
            };
        }]);

sx-sref未编译为href

1 个答案: