如何使UI-Router在自定义AngularJS指令中工作

Question

我正在尝试使用自定义指令为我的应用程序创建导航树。目前，我在指令中有以下内容(缩小(：

(function() {
  'use strict';
  angular
    .module('app.layout')
    .directive('cnNavTree', ['$log', '$state', cnNavTree]);
  function cnNavTree($log, $state) {
      var directive = {
        link: link,
        restrict: 'EA',
        templateUrl: 'app/layout/cn-nav-tree.html'
      };
      return directive;
    function link(scope, element, attrs) {
      scope.$on('stateChange', function (event, toState, fromState) {
        updateNavTree(event, toState, fromState)
      });
      function updateNavTree(event, toState, fromState) {
        element.html('<span class="color" ui-sref="app.twoWays">Report load</span>');
      }
    }
  }
})();

除了 element.html 中的UI-SREF外，一切都还可以，它不起作用，我不能转到 app.twoways state。有什么想法，我们如何解决问题？

预先感谢

Answer 1

，因为在DOM上有角度结合。在将DOM注入DOM树之前，您必须使用当前范围的HTML元素compile。

//inject $compile before using it.
var compiledDOM = $compile('<span class="color" ui-sref="app.twoWays">Report load</span>')($scope);
element.append(compiledDOM);