从属性文件加载锚标记时,ui-sref无法正常工作

时间:2019-02-07 06:02:52

标签: angularjs angularjs-directive angular-ui-router

属性文件中的条目

MYKEY= <a ui-sref="mystate.state">Go to my page using state</a> and <a href="/#/mypage/page">Go to my page using link/a>

我已经从属性文件中提取了此密钥,并在其上应用了$sce.trustAsHtml()并用于html中。我可以看到 使用链接转到我的页面 的链接,但是 使用状态转到我的页面 不能正常工作它具有ui-sref标签。有人可以指定它无法正常工作的原因和解决方案。

注意:ui-sref在HTML中直接使用时在我的项目中正常工作。

1 个答案:

答案 0 :(得分:1)

可能是因为未编译内容,因此ui-sref无法正常工作。

我发现下面的指令可以编译并插入html代码,请检查是否可以解决您的问题!

该指令来自此SO Answer

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.test = function() {
    console.log("it works!");
  }
  $scope.html = '<a ui-sref="mystate.state">Go to my page using state</a> and <a href="/#/mypage/page">Go to my page using link</a><button ng-click="test()">click</button>{{asdf}}';
});

app.directive('compile', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },
            function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);
                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
}])
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div compile="html"></div>
</div>