Доступ Угловое контроллер в сценарии

Question

В настоящее время, у меня есть некоторый код, как этот

<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> 

Этот код содержится в угловом директивы.

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

Так что я действительно пытаюсь сделать, это получить доступ к некоторым переменным контроллера здесь

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

Таким образом, я могу просто плагин мой контроллер к нему через директиву тега: Eg

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

Каков правильный путь?

Answer 1

Способ объединения jquery и углового заключается в создании угловой директивы, которую вы сделали. Тем не менее, вы должны перенести свой код jquery внутри директивы вместо того, чтобы делать это извне и передавать данные в директиву. В этом случае вы можете создать контрольный контроллер, а затем загрузите свои json-данные в самом контроллере. Это должно быть что-то вроде этого (непроверенных код):

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