Первый раз, спрашивая aq, поэтому, если я делаю что-то не так, пожалуйста, дайте мне знать, чтобы я мог исправить это, поскольку я пробовал найти ответ здесь, но не могу, поэтому всякая помощь будет очень признательна.
Я пытаюсь загрузить список "Страны" с помощью контроллера, и все, кажется, идет хорошо, никаких ошибок, никаких предупреждений, он загружает модуль и попадает в угловой контроллер, но он никогда не попадает в функцию/не переходит в код внутри функции контроллера. Я что-то упускаю? Я делаю что-то неправильно?
Register.cshtml
<div ng-app="RegisterApp" class="form-group" ng-controller="CountriesController as CountriesCtrl">
<label class="input-desc">Country</label>
<select ng-model="country"
ng-options="country.Id as country.Name for country in countries">
<option value="{{CountriesCtrl.country.Id}}">{{CountriesCtrl.country.Name}}</option>
</select>
</div><!-- End .from-group -->
RegisterApp.js
var app = angular.module("RegisterApp", []);
CountriesService.js
/// <reference path="../App.js" />
angular.module("RegisterApp").service("CountriesService", function ($http) {
this.getCountries = function () {
return $http({
method: "Get",
url: "/Account/GetCountries"
});
};
});
CountriesController.js
/// <reference path="../Services/CountriesService.js" />
angular.module("RegisterApp").controller("CountriesController", function ($scope, CountriesService) {
getCountries();
function getCountries() {
CountriesService.getCountries()
.success(function (data, status, headers, config) {
$scope.countries = data;
$scope.country = $scope.countries[0];
})
.error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
});
Edit: Перемещено ng-приложение, было ошибочно скопировано таким образом, было изменение, которое я сделал, чтобы попробовать что-то перед отправкой q, извините за это
ng-app
необходимо зарегистрировать до ng-controller
(или на том же элементе). Вы зарегистрировали его в дочернем элементе (select
) для элемента с ng-controller
Измените свой HTML-код на:
<div ng-app="RegisterApp" class="form-group" ng-controller="CountriesController as CountriesCtrl">
<label class="input-desc">Country</label>
<select ng-model="country"
ng-options="country.Id as country.Name for country in countries">
<option value="{{CountriesCtrl.country.Id}}">{{CountriesCtrl.country.Name}}</option>
</select>
</div>
Посмотрите на этот JSFiddle.
Ваш код должен быть:
<div ng-app="RegisterApp">
<!-- some beautiful html -->
<div class="form-group" ng-controller="CountriesController as CountriesCtrl">
<label class="input-desc">Country</label>
<select ng-model="country" ng-options="country.Id as country.Name for country in countries">
<option value="{{CountriesCtrl.country.Id}}">{{CountriesCtrl.country.Name}}</option>
</select>
</div>
<!-- some beautiful html -->
</div>
Обратите внимание на использование директивы ngApp.
Кроме того, убедитесь, что все ваши зависимости введены правильно (я имею в виду блок <head>
)
app.service
иapp.controller
вместоangular.module("RegisterApp").service...
А также посмотрите ответ Шарикова, если вам не хватает директивыng-app