脚本

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

这样我可以通过指令标签只是插件我的控制器它： 如

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

这是怎么回事？

Answer 1

你结合jquery和angular的方式是通过创建一个角度指令，你做了。但是，您应该将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; 
 
       }); 
 
      }); 
 
     } 
 
    }; 
 
});