Угловые файлы модулей и контроллеров, похоже, не работают

0

У меня есть следующие объявления с угловым выражением и не жалуйтесь на синтаксические ошибки 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>

Что я могу делать неправильно?

  • 1
    Что такое area.options? Можно ли показать содержимое этого массива?
  • 0
    Просто, кстати, у Chrome есть проблемы с точками останова, поэтому я использую старый добрый грязный оператор debugger , и код действительно работает. Теперь мне легче найти проблему.
Теги:

3 ответа

2
Лучший ответ

Во-первых, вместо того, чтобы ссылаться на ваш модуль через переменную, вы могли бы использовать синтаксис 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.

Также посмотрите на эти ресурсы:

https://docs.angularjs.org/guide

"Мышление в AngularJS", если у меня есть фон jQuery?

  • 0
    Похоже, с помощью $http.post получилось, но также спасибо за другие советы и ссылки.
  • 0
    Добро пожаловать. Удачного кодирования
0
  • angular.module("hookPointApp", []) (добавить скобку)
  • использовать угловой http заменить jquery ajax, потому что некоторое время не может обновить dom.

Попробуй:

(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);
    ...
});
})();
0

Функция 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
    };
});
})();
  • 0
    Нет, это определено, но довольно долго, и я для краткости опустил его. Вот что означают эллипсы (...). Я добавил функцию сейчас. И вы не имеете в виду $scope.areas.getOptions = function() ?
  • 0
    angular.module ( "hookPointApp")? Вы уверены, что не angular.module ("hookPointApp", [])?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню