为什么AngularJs不放弃页面更改指令？

Question

我找到了这个treeview指令

from datetime import datetime as dt

def datenum(d):
    return 366 + d.toordinal() + (d - dt.fromordinal(d.toordinal())).total_seconds()/(24*60*60)

d = dt.strptime('2019-2-1 12:24','%Y-%m-%d %H:%M')
dn = datenum(d)

我以这种方式在html中称呼它

////////////////////////////////////////////////////////////////////////////////
/// TREEVIEW  //////////////////////////////////////////////////////////////////
angular.module('myApp.treeView', []).directive('treeView', function($compile) {
  return {
    restrict : 'E',
    scope : {
      localNodes : '=model',
      localClick : '&click'
    },
    link : function (scope, tElement, tAttrs, transclude) {

      var maxLevels = (angular.isUndefined(tAttrs.maxlevels)) ? 10 : tAttrs.maxlevels; 
      var hasCheckBox = (angular.isUndefined(tAttrs.checkbox)) ? false : true;
      scope.showItems = [];

      scope.showHide = function(ulId) {
        var hideThis = document.getElementById(ulId);
        var showHide = angular.element(hideThis).attr('class');
        angular.element(hideThis).attr('class', (showHide === 'show' ? 'hide' : 'show'));
      }

      scope.showIcon = function(node) {
        if (!angular.isUndefined(node.children)) return true;
      }

      scope.checkIfChildren = function(node) {
        if (!angular.isUndefined(node.children)) return true;
      }

      /////////////////////////////////////////////////
      /// SELECT ALL CHILDRENS
      // as seen at: http://jsfiddle.net/incutonez/D8vhb/5/
      function parentCheckChange(item) {
        for (var i in item.children) {
          item.children[i].checked = item.checked;
          if (item.children[i].children) {
            parentCheckChange(item.children[i]);
          }
        }
      }

      scope.checkChange = function(node) {
        if (node.children) {
          parentCheckChange(node);
        }
      }
      /////////////////////////////////////////////////

      function renderTreeView(collection, level, max) {
        var text = '';
        text += '<li ng-repeat="n in ' + collection + '" >';
        text += '<div class="wrapper-treeview" style="padding: 10px" ng-class="{bgFirsr: $first && showIcon(n), bgChildren: !showIcon(n), bgBrown: !$first && showIcon(n), lastBorderRadius: $last}" >';
        text += '<span ng-show=showIcon(n) class="show-hide" ng-click=showHide(n.id)><i class="zmdi zmdi-plus icon-color"></i></span>';
        text += '<span ng-show=!showIcon(n) style="padding-right: 13px"></span>';

        // if (hasCheckBox) {
        //   text += '<input class="tree-checkbox" type=checkbox ng-model=n.checked ng-change=checkChange(n)>';
        // }

        text+= '<span class="icon-color" style="cursor: pointer" ng-click=localClick({node:n})><i class="zmdi zmdi-eye"></i></span>'


        text += '<label style="vertical-align: bottom;">{{n.name}}</label></div>';

        if (level < max) {
          text += '<ul ng-class="{show: $first && showIcon(n), hide: !$first && showIcon(n)}" id="{{n.id}}" class="" ng-if=checkIfChildren(n)>'+renderTreeView('n.children', level + 1, max)+'</ul></li>';
        } else {
          text += '</li>';
        }

        return text;
      }// end renderTreeView();

      try {
        var text = '<ul class="tree-view-wrapper">';
        text += renderTreeView('localNodes', 1, maxLevels);
        text += '</ul>';
        tElement.html(text);
        $compile(tElement.contents())(scope);
      }
      catch(err) {
        tElement.html('<b>ERROR!!!</b> - ' + err);
        $compile(tElement.contents())(scope);
      }
    }
  };
});

如果我使用<tree-view id="treeview" checkbox click="myClick(node)" class="ng-cloak" model="nodes"></tree-view> 刷新页面，则一切正常。但是，如果我更改网站页面，然后再次单击，则树视图页面将无法正常工作。它不呈现指令。控制台上没有错误。我尝试添加F5指令和类，但未做任何更改