AngularJs - код, обращающийся к переменной $ scope до ее готовности

Question

AngularJs - код, обращающийся к переменной $ scope до ее готовности

0

У меня есть контроллер (MyCtrl). Первое, что нужно сделать, это сделать вызов http.get и получить ответ и назначить его $scope.input. Остальная часть контроллера зависит от $scope.input. Но проблема в том, что код в контроллере пытается получить доступ к $scope.input до завершения HTTP-вызова.

Как я могу это решить?

app.controller('MyCtrl', function($scope, $http, $routeParams, factory) {
   factory.getInfo($routeParams.id) 
    .success(function(response) {
         //The factory code make the http.get call
           $scope.input = response;
    });

   //Rest of code accessing $scope.input before it is ready
});

PS: Я не хочу размещать rest of controller code внутри блока success

благодаря

user7 28 дек. 2015, в 05:50

Источник

0

Вы используете angular-router или ui-router?
Arkantos 28 дек. 2015, в 04:47
0

Я использую routeProvider
user7 28 дек. 2015, в 04:49
0

Разве вы не можете обернуть всю свою логику инициализации внутри функции, а затем вызвать эту функцию внутри вашего успешного обратного вызова?
Arkantos 28 дек. 2015, в 04:53
0

@Arkantos Я могу это сделать. , Остальная часть кода контроллера имеет несколько функций и блоков кода в зависимости от $scope.input . Поэтому я боюсь, что в моем случае имеет смысл поместить все это в одну функцию
user7 28 дек. 2015, в 04:57
0

Фактически, вы уже размещаете всю свою логику внутри функции контроллера :) С предложенным выше изменением у вас будет встроенная функция внутри вашего контроллера. Теперь, когда вам нужно дождаться ответа асинхронного вызова, я думаю, что это самый простой способ справиться с этим. Если вы можете позволить себе сменить свой роутер, то у ui-router есть функция resolve для таких сценариев.
Arkantos 28 дек. 2015, в 05:07
0

@Arkantos Затем я переместлю весь остальной код в функцию с именем callback а затем вызову его из блока успеха. Но все же есть определенные вспомогательные функции, которые не зависят от $scope.input . Эти функции могут быть помещены вне callback() . Все хорошо?
user7 28 дек. 2015, в 05:10
0

Давайте продолжим эту дискуссию в чате .
user7 28 дек. 2015, в 05:12
0

Ага. Как я уже сказал, только перенесите логику инициализации в вашу функцию initialize() , любые обработчики событий в области видимости, другие служебные функции можно оставить снаружи, как сейчас
Arkantos 28 дек. 2015, в 05:13
0

Я только что обнаружил, что ng-route также имеет функцию разрешения . Разместил мой ответ с обоими подходами.
Arkantos 28 дек. 2015, в 05:38

Показать ещё 7 комментариев

Теги:

javascript

angularjs

model-view-controller

http-get

angularjs-scope

1 ответ

Ещё вопросы

Вы используете angular-router или ui-router?
Разве вы не можете обернуть всю свою логику инициализации внутри функции, а затем вызвать эту функцию внутри вашего успешного обратного вызова?
@Arkantos Я могу это сделать. , Остальная часть кода контроллера имеет несколько функций и блоков кода в зависимости от $scope.input . Поэтому я боюсь, что в моем случае имеет смысл поместить все это в одну функцию
Фактически, вы уже размещаете всю свою логику внутри функции контроллера :) С предложенным выше изменением у вас будет встроенная функция внутри вашего контроллера. Теперь, когда вам нужно дождаться ответа асинхронного вызова, я думаю, что это самый простой способ справиться с этим. Если вы можете позволить себе сменить свой роутер, то у ui-router есть функция resolve для таких сценариев.
@Arkantos Затем я переместлю весь остальной код в функцию с именем callback а затем вызову его из блока успеха. Но все же есть определенные вспомогательные функции, которые не зависят от $scope.input . Эти функции могут быть помещены вне callback() . Все хорошо?
Давайте продолжим эту дискуссию в чате .
Ага. Как я уже сказал, только перенесите логику инициализации в вашу функцию initialize() , любые обработчики событий в области видимости, другие служебные функции можно оставить снаружи, как сейчас
Я только что обнаружил, что ng-route также имеет функцию разрешения . Разместил мой ответ с обоими подходами.

Arkantos · Accepted Answer · 2015-12-28T04-09-00.000Z

Вариант-1: использование некоторой функции intialize

Вы можете переместить логику инициализации на функцию, называемую initialize() а затем вызвать функцию в обратном вызове успеха вашего вызова AJAX.

app.controller('MyCtrl', function($scope, $http, $routeParams, factory) {
   factory.getInfo($routeParams.id) 
    .success(function(response) {
           initialize(response);
    });

    function initialize(){
       /* Move only the logic that depends on response from AJAX call in to 
          this  method.

          All utility functions, event handlers on scope are still outside
          this function
        */

         $scope.input = response;
    }

});

Вариант-2: использование решения

Вы также можете использовать функцию resolve для загрузки всех зависимостей перед инициализацией контроллера, как показано ниже.

В вашем маршрутизаторе-config

$routeProvider
        .when('/home/:id', {
            templateUrl: 'home.html',
            controller: 'MyCtrl',
            resolve: {
                factory : 'factory',
                initData: function(factory,$route){
                   return factory.getInfo($route.current.params.id); 
                }
            }
        });

В вашем контроллере

app.controller('MyCtrl', function($scope, $http, initData){
  $scope.input = initData;
  // rest of your logic
});

Для получения дополнительной информации об этом шаблоне-активизации и маршрутизации-контроллера вы можете обратиться к этому и этому.

Надеюсь это поможет :)