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

debugcn 发表于 Dev

阿克谢·盖克瓦德

进入属性文件

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 中使用时，它在我的项目中正常工作。

纳伦·穆拉利

可能是因为内容未编译，因此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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。