Почему AngularJ не изменяет директиву при смене страницы? - PullRequest
Новая
       27

Почему AngularJ не изменяет директиву при смене страницы?

0 голосов
/ 14 февраля 2019

Я нашел эту директиву древовидной структуры 

////////////////////////////////////////////////////////////////////////////////
/// 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);
      }
    }
  };
});

И я называю ее в html следующим образом 

<tree-view id="treeview" checkbox click="myClick(node)" class="ng-cloak" model="nodes"></tree-view>

, если я обновляю страницу с помощью F5, я вижу все нормально,Но если я меняю страницу веб-сайта и нажимаю снова, страница дерева не работает.Это не делает директиву.На консоли нет ошибок.Я пытался добавить директиву ng-cloak и класс, но ничего не изменилось

...