Rufen Sie AngularJS-Direktive vom Controller auf klicken

Question

Schnelle Frage, also verwende ich tg-dynamic-directive, um eine json-Datei durchzulaufen und folgenden Baum auszugeben. (Siehe Bild angehängt)

Das Problem ist also, wenn der „Baum“ wird sehr lange gibt es einige ernsthafte Performance-Probleme, weil der Browser eine Menge von Elementen zu machen braucht. (Ich spreche von 1000 oder länger). Also versuche ich zunächst nur die ersten beiden Level zu laden und der Rest wird kollabiert. Wenn ein Benutzer auf den Erweiterungspfeil jedes Elements klickt, muss ich seine untergeordneten Elemente rendern. (Wenn das Sinn macht). Also tg-dynamic-directive wieder ausführen.

Wenn Seite beginnt Rendering und Funktion, die Vorlage mit dem HTML zurückgibt, feuerte ich diese haben zu prüfen, ob seine ersten 2 Ebenen:

$scope.getView = function (item) { 

     // Check if item is defined 
     if(typeof item != 'undefined') { 

      // Load course, label and module first! 
      if(item.type == 'course' || item.type == 'label' || item.type == 'module' || item.type == 'course_assessment' || item.type == 'module_assessment') { 
       // Return Template 
       return 'nestable_item.html'; 
      } else { 
       // Otherwise return null 
       return null; 
      } 
     } else { 
      return null; 
     } 
    }; 

Und was muss ich noch einmal, dass die Richtlinie tun rufen, wenn Pfeil erweitern ist angeklickt.

Dies ist die Richtlinie:

angular.module('tg.dynamicDirective', []) 
    .directive('tgDynamicDirective', ['$compile', 
     function($compile) { 
      'use strict'; 

      function templateUrlProvider(getView, ngModelItem) { 
       if (getView) { 
        if (typeof getView === 'function') { 
         var templateUrl = getView(ngModelItem) || ''; 
         if (templateUrl) { 
          return templateUrl; 
         } 
        } else if (typeof getView === 'string' && getView.length) { 
         return getView; 
        } 
       } 
       return ''; 
      } 

      return { 
       restrict: 'E', 
       require: '^ngModel', 
       scope: true, 
       template: '<div ng-include="templateUrl"></div>', 
       link: function(scope, element, attrs, ngModel) { 

        scope.$watch(function() { 
         var ngModelItem = scope.$eval(attrs.ngModel); 
         var getView = scope.$eval(attrs.tgDynamicDirectiveView); 
         scope.ngModelItem = ngModelItem; 
         return templateUrlProvider(getView, ngModelItem); 
        }, function(newValue, oldValue) { 
         scope.templateUrl = newValue; 
        }); 
       } 
      }; 
     } 
    ]); 

Meine Frage ist, wie kann ich tg-dynamic-Richtlinie erneut ausgelöst, wenn Pfeil erweitert von der Steuerung angeklickt wird.

Answer 1

Verwenden $rootScope.broadcast("XXXXXX"); und fangen es

$rootScope.$on("XXXXXX", function() { 
    // function call 
}) 

in Richtlinie und rufen Sie die gewünschte Funktion. oder verwenden Sie document.createElement ("tg-dynamic-directive");