javascript - 在脚本中访问 Angular Controller

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>

此代码包含在 Angular Directive(指令)中。

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

所以我真正想做的是在这里访问一些 Controller 变量

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

这样我就可以通过指令标签将 Controller 插入其中:例如

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

正确的方法是什么？

Answer 1

结合 jquery 和 Angular 的方式是创建一个 Angular 指令，您就是这样做的。但是，您应该将 jquery 代码移至指令内部，而不是在外部进行操作并将数据传递给指令。在这种情况下，您可以创建一个指令 Controller ，然后将 json 数据加载到 Controller 本身中。它应该是这样的(未经测试的代码):

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