У меня есть следующие объявления с угловым выражением и не жалуйтесь на синтаксические ошибки 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);
в функции, выполнение там не останавливается, например $scope.areas.getOptions(1);
который предназначен для инициализации выпадающего списка, не находится в функции, но ниже объявления функции, поэтому я хочу объявить функцию, а затем вызвать ее сразу же после этого. Точка останова в файле модуля, на var hookPointApp = angular.module("hookPointApp", []);
даже не работает, но некоторые функции Angular в приложении все же иногда работают.
Угловые (ядро и мои собственные) файлы, я думаю, правильно ссылаются в нижней части элемента body
в Layout.cshtml
:
@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>
Что я могу делать неправильно?
Во-первых, вместо того, чтобы ссылаться на ваш модуль через переменную, вы могли бы использовать синтаксис getter
для модуля. Я бы также разделил объявление модуля и определение контроллера c в отдельный файл. Это соответствует Руководству Angular Style от John Papa, одобренному командой Angular
:
App.js
(function () {
'use strict';
angular.module("hookPointApp", []);
})();
agentCtrl.js
(function () {
'use strict';
angular.module("hookPointApp").controller("agentCtrl", function ($scope, $http) {
$scope.model = {};
});
})();
Во-вторых, вы, вероятно, должны использовать $http
службу Angular
или другую библиотеку для $http
запросов, например Restangular
. Проблема заключается в том, что вы, вероятно, используете метод ajax jQuery's
который по завершении не имеет возможности разрешить цикл углового дайджеста, зная, что есть ответ с сервера, если вы не уведомите его через $scope.apply()
.
Обратите внимание, что в Promise
мы используем then
метод promise
а не success
который устарел. Подробнее читайте здесь около $http
и уведомления об устаревании.
Здесь находится suburbsCtrl.js
с suburbsCtrl.js
$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);
});
})();
PS- Angular
документация поощряет использование услуг Angular's
и использует только методы jQuery's
когда они недоступны. Я бы рекомендовал использовать Angular
без внешней зависимости jQuery
и использовать встроенный jqLite
в Angular
для тех методов, для которых вы бы использовали jQuery
.
Также посмотрите на эти ресурсы:
$http.post
получилось, но также спасибо за другие советы и ссылки.
Попробуй:
(function () {
'use strict';
angular.module("hookPointApp", []).controller('suburbsCtrl', function ($scope, $http) {
$scope.areas.url = "/Area/ProvinceAreas";
$scope.areas.getOptions = function (provinceId) {
$http.post($scope.areas.url, {
provinceId: provinceId
}).success(function(data){
if (data) {
$scope.areas.options = data;
}
});
};
// TODO Get a proper provinceId somehow.
$scope.areas.getOptions(1);
...
});
})();
Функция getOptions() не определена.
определить:
(function () {
'use strict';
angular.module("hookPointApp").controller('suburbsCtrl', function ($scope, $http) {
...
// TODO Get a proper provinceId somehow.
$scope.areas.getOptions(1);
...
$scope.getOptions = function() {
// on change select , call this
};
});
})();
$scope.areas.getOptions = function()
?
debugger
, и код действительно работает. Теперь мне легче найти проблему.