Zugriff Angular-Controller in einem Skript

Question

Derzeit habe ich einige Code wie dieses

<div id="{{id}}" ng-controller="ngController as ngCtrl" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <!-- Removed some non important html --> 
     <script src="/static/jstree/dist/jstree.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $.getJSON("/book/modules", function(d) { 
        var moduleDiv = $("#module-div") 
        moduleDiv.jstree({ 
         core: { 
          data: d 
         } 
        }); 
        moduleDiv.on("select_node.jstree", function(e, data) { 
         ngCtrl.selectedModule = data; 
        }); 
       }); 
      }); 
     </script> 
    </div> 
</div> 

Dieser Code innerhalb eines Winkel Richtlinie enthalten ist.

app.directive("modulesModal", function(){ 
    return { 
     scope: { 
      label: "@", 
      input: "@", 
      ngController: "=", 
      id: "@" 
     }, 
     templateUrl: "/static/book_config/html/modules-modal.html", 
     link: function($scope, $elem, $attrs){ 
      // Non important stuff 
     } 
    }; 
}); 

Also, was ich wirklich zu tun versuchen, ist einige Variablen Controller zugreifen hier

moduleDiv.on("select_node.jstree", function(e, data) { 
    ngCtrl.selectedModule = data; 
}); 

Auf diese Weise ich mein Controller nur Plugin kann über die Richtlinie Tag es: Eg

<modules-modal id="myModal" ng-controller="newBookCtrl"></modules-modal> 

Was ist der richtige Weg?

Answer 1

Die Art, wie Sie jQuery und eckig kombinieren, besteht darin, eine eckige Anweisung zu erstellen, was Sie getan haben. Sie sollten Ihren jquery-Code jedoch innerhalb der Direktive verschieben, anstatt ihn extern auszuführen und die Daten an die Direktive zu übergeben. Sie können in diesem Fall einen Direktiven-Controller erstellen und dann Ihre json-Daten stattdessen in den Controller laden. Es sollte so etwas wie dieses (ungetestet Code) sein:

app.directive("modulesModal", function(){ 
 
    return { 
 
     scope: { 
 
      label: "@", 
 
      input: "@", 
 
      //ngController: "=", <- you don't need to pass in a controller 
 
      id: "@" 
 
     }, 
 
     templateUrl: "/static/book_config/html/modules-modal.html", 
 
     link: function($scope, $elem, $attrs){ 
 
      // Non important stuff 
 
     }, 
 
     controller: function ($scope) { 
 
       $.getJSON("/book/modules", function(d) { 
 
       var moduleDiv = $("#module-div") 
 
       moduleDiv.jstree({ 
 
        core: { 
 
         data: d 
 
        } 
 
       }); 
 
       moduleDiv.on("select_node.jstree", function(e, data) { 
 
        $scope.selectedModule = data; 
 
       }); 
 
      }); 
 
     } 
 
    }; 
 
});