在AngularJS指令

Question

我的指示如下：

(function () {
  'use strict';

  angular
    .module('app.directives.breadcrumb', [])
    .directive('breadcrumb', breadcrumb);

  breadcrumb.$inject = ['$compile'];

  function breadcrumb($compile) {
    var directive = {
      restrict: 'EA',
      template: "<ol id='breadcrumb' class='breadcrumb'></ol>",
      scope: {
        crumbs: '@'
      },
      link: linkFunc
      // controller: BreadcrumbController,
      // controllerAs: 'vm',
      // bindToController: true
    };

    function linkFunc(scope, element, attrs) {
      var vm = this;

      try {

        var list = document.getElementById('breadcrumb');

        var markupToAppend = scope.crumbs.split(";;");

        for (var index = 0; index < markupToAppend.length; index++) {
          var item = document.createElement("li");
          item.innerHTML = markupToAppend[index];

          if (index === (markupToAppend.length - 1)) {
            item.classList.add("active");
          }

          list.appendChild(item);

        }

        $compile(list)(scope);

      } catch (error) {
        console.log(error);
      }

    }

    return directive;
  }

  // function BreadcrumbController(scope) {

  // }

})();

该指令被称为：

<breadcrumb crumbs="<a ng-href='#/predict/rul'>{{ 'PREDICT' | translate }}</a>;;{{ 'FGD_TITEL' | translate}}"></breadcrumb>

第一页加载后，它工作正常，但如果我在我的应用程序中导航 我看不到清单。

调用linkFunc但列表为空。为什么呢？