在 javascript 代码中加载 AngularJS 控制器答案

【问题标题】：Load AngularJS controller in javascript code在 javascript 代码中加载 AngularJS 控制器
【发布时间】：2014-03-16 21:50:24
【问题描述】：

我有一个 jQuery UI 对话框，在这个弹出窗口中我有一个动态的 <select> 带有角度和 Ajax 请求。如果我点击一个按钮，我的对话框就会出现，但即使对话框不可见，也会播放 AngularJS 脚本。

我在一个条件下停止了我的脚本：if($("#MyDialog).dialog("isOpen") ===true)"

它可以工作，但我不知道如何“重新加载”我的 Angular 控制器以在显示我的对话框时加载选择输入...

我试过这个：MyController(angular.element($('div[ng-controller="MyController"]')).scope(), angular.element($('div[ng-controller="MyController"]')).http);

但它不起作用......有什么想法吗？

我的控制器代码：

function MyController($scope, $http) {
    if ($("#myDialog").dialog("isOpen") === true) {
        $http.
            success(function (data, status, headers, config) {
                $scope.select = data;
            }).
            error(function (data, status, headers, config) {
                alert("error !");
            });
    }
}

【问题讨论】：

这是 angular.js 中的反模式 -> $("#myDialog") ，此代码可能应该存在于指令中。请提供一个plunker
如果您不尝试执行他们努力执行的做法，那么使用 AngularJS 是没有意义的。您不应该访问控制器中的 DOM 元素。

标签： javascript jquery html ajax angularjs

【解决方案1】：

不要访问模式是否打开，而是尝试在打开的模式按钮或链接上单击 ng-click。

<button ng-click="loadSelectData()">Open Modal</button>

<script>
    app.controller("MyController", ["$scope", "$http", function($scope, $http) {
        $scope.loadSelectData = function () {
            // fetch your select data
            // also you can check if you already have the data before going to server
        }
    }]);
</script>

【讨论】：

我将使用由 Angular 控制的 jquery ui 对话框，因此我的选择框将像您一样在 ng-click 上加载。谢谢！