javascript - Angular 模块和 Controller 文件似乎无法运行

Question

我有以下 Angular 声明，并且没有收到有关 JS 语法错误或类似内容的投诉:

App.js:

(function () {
    'use strict';

    var hookPointApp = angular.module("hookPointApp", []);
    hookPointApp.controller("agentCtrl", function ($scope, $http) {
        $scope.model = {};
        ...
    });
})();

郊区Ctrl:

(function () {
    'use strict';

    angular.module("hookPointApp").controller('suburbsCtrl', function ($scope, $http) {
        $scope.areas.url = "/Area/ProvinceAreas";
        $scope.areas.getOptions = function (provinceId) {
            var area = "{'provinceId': '" + provinceId + "'}";
            $.ajax({
                url: $scope.areas.url,
                type: "POST",
                data: area,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                cache: false,
                success: function (response) {
                    if ((response !== null) && (typeof response !== "undefined")) {
                        $scope.areas.options = response;
                    }
                },
                error: function (xmlHttp, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        };
        // TODO Get a proper provinceId somehow.
        $scope.areas.getOptions(1);
        ...
    });
})();

然后我有一个中继器，其选项声明如下:

<div ng-controller="suburbsCtrl">
    <div class="form-group">
        @Html.LabelFor(model => model.AreaId, new { @class = "control-label" })
        <select class="form-control" ng-model="areas.areaId" ng-change='areas.getOptions($("#province.val()"))'>
            <option> - Select an Area - </option>
            <option id="province" ng-repeat="item in areas.options" ng-value="{{item.Id}}">{{item.Label}}</option>
        </select>
    </div>
</div>

然而，当我更改选择选项时，不会调用 getOptions ，并且我在 Chrome 调试器中放置断点，即使在不在函数中的行上，执行也不会在那里停止，例如$scope.areas.getOptions(1); 用于初始化下拉列表，它不在函数中，而是在函数声明下方，所以我想声明该函数，然后立即调用它。模块文件中 var hookPointApp = angular.module("hookPointApp", []); 上的断点甚至不起作用，但应用程序中的某些 Angular 功能有时仍然有效。

我认为，Angular(核心和我自己的)文件在 Layout.cshtml 中 body 元素的底部被正确引用:

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/Scripts/angular/angular.js"></script>
    <script src="~/Scripts/angular/angular-resource.min.js"></script>
    <script src="~/Scripts/App/App.js"></script>
    <script src="~/Scripts/App/suburbsCtrl.js"></script>
    @RenderSection("ViewScripts", required: false)
</body>

我可能做错了什么？

Answer 1

首先，您是否可以使用模块的 getter 语法，而不是通过变量引用您的模块。我还将模块声明和 C Controller 定义拆分为单独的文件。这与 John Papa 的 Angular Style Guide 一致。得到 Angular 团队的认可:

App.js

(function () {
'use strict';

angular.module("hookPointApp", []);    
})();

agentCtrl.js

(function () {
'use strict';


angular.module("hookPointApp").controller("agentCtrl", function ($scope, $http) {
    $scope.model = {};
   });
})();

其次，您可能应该使用 Angular 的 $http 服务或其他库来处理 $http 请求，例如 Restangular >。您遇到的问题是因为您可能正在使用 jQuery 的 ajax 方法，该方法在完成后无法让 Angular 摘要循环知道服务器有响应，除非您通过 通知它$scope.apply().

请注意，在 Promise 解析中，我们使用 promise 的 then 方法，而不是 success ，它具有已被弃用。 Read more here关于 $http 和弃用通知。

这是带有 $http 服务的 suburbsCtrl.js。

(function () {
'use strict';

angular.module("hookPointApp").controller('suburbsCtrl', function ($scope, $http) {
    $scope.areas.url = "/Area/ProvinceAreas";
  $scope.areas.url = "/Area/ProvinceAreas";
$scope.areas.getOptions = function (provinceId) {
    $http.post($scope.areas.url, {
        provinceId: provinceId
    }).then(function(data){
        if (data) {
            $scope.areas.options = data;
        }
    }).catch(function(err){
      console.error(err);
    });
};
    // TODO Get a proper provinceId somehow.
    $scope.areas.getOptions(1);

});
})();

PS-Angular 文档鼓励使用 Angular 服务，并且仅在不可用时使用 jQuery 方法。我建议尝试在没有外部 jQuery 依赖的情况下使用 Angular ，并使用 Angular 中内置的 jqLit​​e 来实现以下方法:你可以使用jQuery。

另请查看这些资源:

https://docs.angularjs.org/guide

"Thinking in AngularJS" if I have a jQuery background?