Question

我有以下Angular声明，并且没有抱怨JS语法错误或类似的东西：

App.js：

(function () {
    'use strict';

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

suburbsCtrl：

(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（核心和我自己的）文件在body的{{1}}元素的底部正确引用：

Layout.cshtml

我可能做错了什么？

Answer 1

首先，您可以使用模块的getter语法，而不是通过变量引用模块。我还将模块声明和c控制器定义分成单独的文件。这符合Angular团队认可的John Papa Angular Style Guide：

App.js

(function () {
'use strict';

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

agentCtrl.js

(function () {
'use strict';


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

其次，您应该使用$http的{{1}}服务或其他库来处理Angular请求，例如$http。您遇到的问题是因为您可能正在使用Restangular ajax方法，该方法在完成时无法让角度摘要循环知道服务器有响应，除非您通过jQuery's通知它。

请注意，在$scope.apply()解决方案中，我们使用Promise的{{1}}方法，而不是then已弃用的方法。关于promise的{{3}}和弃用通知。

以下success服务$http。

suburbsCtrl.js

PS- $http文档鼓励使用(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); }); })();服务，并且仅在不可用时使用Angular方法。我建议您尝试使用Angular's而不使用外部jQuery's依赖项，并使用Angular中的内置jQuery表示您将使用jqLite的方法。

另请查看以下资源：

Angular模块和控制器文件似乎无法运行

3 个答案: