如何使ui路由器在自定义Angularjs指令内工作

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

(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状态。有什么想法，我们怎么解决这个问题

---

提前感谢，因为DOM上有角度绑定。在将DOM注入DOM树之前，必须使用当前作用域编译HTML元素

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

---

如果您提供了一个可复制的示例“$stateChangeStart”而不是“stateChange”，并阅读了关于从code@AlonEitan，它不是$rootScope。$on'$stateChangeStart'。。。，这是我的自定义$scope。$broadcast…在directive上包含$rootScope如果不使用$compile，则无法手动插入指令，因此angular知道这些指令并实际编译它们。我将在几分钟内尝试