1

Подключил Ui-router. Отображает три разных шаблона в разных местах. На сервер отправляем некий параметр (он же stateParams) по которому возвращается true или false. Как добавить и куда эту проверку, чтобы по результату с сервера отображало нужные шаблоны или выводило шаблон с информацией про недоступность шаблона? Если false все три шаблона должны быть недоступны. Пробовал в лоб решать прописывая проверку в templateUrl, не работает и дублировать для 3-х шаблонов явно не правильно.

.config(['$locationProvider','$stateProvider', function($locationProvider,$stateProvider,$http){
        $stateProvider
            .state('page', {
                url: "/page:page",
                views: {
                    "viewVideo": {
                        templateUrl: function (stateParams){
                            $http({
                                url: basePath + '/lesson/GetPageData',
                                method: "POST",
                                data: $.param({order: stateParams.page}),
                            })
                                .success(function (response) {
                                    if(response) return '/index_'+ stateParams.page+'_video.html'
                                })
                        },
                        controller: 'lessonPageCtrl'
                    },
                    "viewText": {
                        templateUrl: function (stateParams){
                           $http({
                                url: basePath + '/lesson/GetPageData',
                                method: "POST",
                                data: $.param({order: stateParams.page}),
                            })
                                .success(function (response) {
                                    if(response) return '/index_'+ stateParams.page+'_text.html'
                                })
                        },
                        controller: 'lessonPageCtrl'
                    },
                    "viewQuiz": {
                        templateUrl: function (stateParams){
                            $http({
                                url: basePath + '/lesson/GetPageData',
                                method: "POST",
                                data: $.param({order: stateParams.page}),
                            })
                                .success(function (response) {
                                    if(response) return '/index_'+ stateParams.page+'_quiz.html'
                                })
                        },
                        controller: 'lessonPageCtrl'
                    }
                }
            })
}]);

Хотел использовать решения задачи вот такой способ

angular
    .module('lessonApp')
    .run([
        '$rootScope', '$state', '$stateParams',
        function ($rootScope, $state, $stateParams) {

            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;

            $rootScope.$on('$stateChangeStart',
                function (event, toState, toParams, fromState, fromParams) {
                    if (true) {
                        event.preventDefault();
                    }
                }
            );
        }
    ]);

Но как в if впихнуть ajax запрос через $http не имею представления. Кто простенький пример покажет с Resolve для моей проблемы? Нужно перед загрузкой шаблона проверять что возвращает $http аякс запрос

http://plnkr.co/edit/oILOiXh8iGxoxzT1Xe2j?p=preview

Возник другой вопрос. Для уменьшения нагрузки на сервер данные будут извлекаться из модели pageData, инициализация которой будет происходить при первой загрузки страницы:

angular
    .module('lessonApp')
    .run([
    '$rootScope', '$state', '$stateParams','$http',
    function ($rootScope, $state, $stateParams, $http) {

        $http({
            url: basePath + '/lesson/GetPageData',
            method: "POST",
            data: $.param({lecture: idLecture}),
            headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'}
        })
            .success(function (response) {
                $rootScope.pageData = response;
            })

Потом чтобы не обращаться к серверу при изменении ссылки каждый раз(кроме тех случаях когда модель будет меняться) хотелось бы проверять некое значение из этой модели. Если например $rootScope.pageData[0].isDone==true загружаем тэмплейт

 templateUrl: function (stateParams){
                        if ($rootScope.pageData[0].isDone==true)
                        return '/video.html'
                    },

Это тоже решается через resolve или есть что-то элементарнее? А то $rootScope использовать в $stateProvider не получается

7
  • посмотри resolve
    – Grundy
    1 дек 2015 в 9:36
  • не могу разобраться с этим resolve( 1 дек 2015 в 14:09
  • можешь пример, например на plunkr, привести как сейчас работает?
    – Grundy
    1 дек 2015 в 14:14
  • plnkr.co/edit/oILOiXh8iGxoxzT1Xe2j?p=preview - вот приблизительно накинул.Теперь нужно перед отображением обращаться аяксом на сервер и в зависимости от результата отображать то что есть либо(если запрос вернет false) шаблон с предупреждением о том что пользователь не имеет права для просмотра 1 дек 2015 в 17:15
  • ага, добавьте эту ссылку в пост тоже
    – Grundy
    1 дек 2015 в 17:19

1 ответ 1

2

Вы можете воспользоваться свойством resolve.

Это свойство - объект, содержащий пары ключ-значение:

ключ – {строка}: название зависимости, которая будет внедрена в контроллер.
значение - {строка|функция}:

  • если строка - алиас для сервиса.
  • если функция - будет внедрено значение функции. Если функция возвращает Promise, то он будет разрешен до создания контроллера, а значение будет внедрено в контроллер. Если возвращаемый Promise перейдет в статус rejected - будет послано событие $stateChangeError

Подписавшись на это событие и проверив ошибку - можно выполнять необходимые действия по обработке.

Применительно к вашему случаю: $http сервис возвращает Promise, поэтому его можно перенести в свойство resolve

.state('page', {
    url: "/page:page",
    resolve: {
        auth: function($q, $http){
            return $http({
                        url: basePath + '/lesson/GetPageData',
                        method: "POST",
                        data: $.param({order: stateParams.page}),
                    })
                    .success(function (response) {
                        if(response) return "authorized";
                        
                        return $q.reject('not authorized');
                    });
       }
   },
   ....

Теперь, в случае, когда запрос вернет true все покажется и если прописать в контроллере

function lessonPageCtrl(auth, .../*другие внедрения $scope и т.д.*/) {
    console.log(auth); //authorized

в случае, если запрос вернет false, переводим результат в состояние rejected и ловим в обработчике $stateChangeError

$rootScope.$on('$stateChangeError',
    function(event, toState, toParams, fromState, fromParams, error) {
        console.log(error); // not authorized
    }
);

Пример использования

Пример с $http, в data.json - значение.

Замечание
Вы назначаете один и тот же контроллер трем разным view, в данном случае будет создано три объекта контроллера, которые будут не связаны между собой.

9
  • Буду разбираться завтра. Возник другой вопрос, добавил к первому. Благодарен за внимание 1 дек 2015 в 20:44
  • @ИгорьБаранюк, другой вопрос лучше отдельно, например со ссылкой на этот, а то запутаться можно что где и куда, да и объем большой уже
    – Grundy
    1 дек 2015 в 20:49
  • ru.stackoverflow.com/questions/471148/… спс, добавил 1 дек 2015 в 21:32
  • С чем может быть связано что console.log(auth); выводиться при любых условиях обьект Object {data: "myResponse", status: 200, config: Object, statusText: "OK"}. Даже если $http прописать .success(function (response) { return $q.reject('not authorized'); }). не реагирует на то что написано в success 2 дек 2015 в 9:38
  • @ИгорьБаранюк, нужно конкретно пример кода смотреть, вы смотрели планкер из моего ответа? там выводится все корректно?
    – Grundy
    2 дек 2015 в 10:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.