angularJS- инициировать HTTP-вызов с контроллера не удалось

Я создаю сайт, используя angularJS и PHP. Веб-сайт имеет много страниц как- дома, о нас и т.д.angularJS- инициировать HTTP-вызов с контроллера не удалось

Итак, я создал общий заголовок для сайта, который я включил в моем взгляде, HTML, как это:

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Demo</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
     <script src="angular.min.js"></script> 
     <script src="angular-route.min.js"></script> 
     <script src="commonController.js"></script> 
     <script src="homeController.js"></script> 
     <script src="loginController.js"></script> 

     <script src="app.js"></script> 

    </head> 
    <body> 
     <div class="header" ng-controller="CommonController" 
      ng-include="'header.html'"></div> 
     <div class="main" ng-view></div> 
    </body> 
</html>

и заголовок (header.html) страница выглядит следующим образом:

<nav class="navbar-inverse navbar-fixed-top" role="navigation"> 
    <a href="#/home">Home</a> 
    <a href="#/notifications" >{{vm.commonId}}</a> 
</nav>

и контроллер заголовок HTTP имеет вызов, который извлекает идентификатор пользователя и я пытаюсь показать этот идентификатор в качестве метки для одной из ссылок, указанных выше (commonController.js)

(function() { 

    angular 
     .module('myApp.common', ['ngRoute']) 

     .factory('myCommonService', function($http) { 
      var baseUrl = 'api/'; 
      return { 
       getBasicUserInfo:function() { 
        return $http.get(baseUrl + 'getBasicUserInformation'); 
       } 
      }; 
     }) 

     .controller('CommonController', function($scope, $routeParams, myCommonService) { 
      var vm = this;  
      myCommonService.getBasicUserInfo().success(function(data) { 
       vm.commonId = data.id; 
      }); 
     }); 
})();

Но когда я перемещаюсь по страницам, заголовок остается таким же. Итак, я не могу инициировать этот HTTP-вызов. На моем сайте много страниц.

Можно ли это сделать? Я довольно новичок в этой платформе.

Route (app.js)

(function() { 

    angular.module('myApp', [ 
     'ngRoute', 
     'myApp.login', 
     'myApp.home', 
     'myApp.common' 
    ]) 
    .config(['$routeProvider', function($routeProvider) { 
     $routeProvider 
     .when('/login', { 
      controller: 'LoginController', 
      templateUrl: 'loginView.html',  
      controllerAs: 'vm' 
     }) 
     .when('/home', { 
      controller: 'HomeController', 
      templateUrl: 'homeView.html',  
      controllerAs: 'vm'   
     }) 
     .otherwise({ 
      redirectTo: '/login' 
     }); 
    }]); 
})();

P.S: Я исключил другие страницы, чтобы уменьшить сложность и сделать мой запрос легко понять.

Спасибо!

источник

2016-10-13 John Doe

Я использую 'Ui-router', который предлагает много больше, чем функции' routeProvider 'и ваша проблема может быть решена легко.Это не решение для вас, но я подумал, что это может вам помочь. – Sajan

Почему вы делаете '(function() {})()' в своих файлах? – Chrillewoodz

Новое в этом. Это неправильно? @Chrillewoodz –

Кажется мне все, что не хватает выпускающей шаблон знать контекстный псевдоним для контроллера

<div class="header" ng-controller="CommonController as common" 
    ng-include="'header.html'"></div>

и header.html

<a href="#/notifications">{{common.commonId}}</a>

Примечание, что я использовал common вместо vm, так как некоторые из ваших маршрутов используют vm, и лучше избегать конфликтов.

Если вы хотите, чтобы запустить обновление на странице навигации (т.е. изменение маршрута), изменить ваш CommonController к этому

.controller('CommonController', function($scope, myCommonService) { 
    var ctrl = this; 
    var update = function() { 
     myCommonService.getBasicUserInfo().then(function(res) { 
      ctrl.commonId = res.data.id; 
     }); 
    }; 
    update(); 

    $scope.$on('$routeChangeSuccess', update); 
});

источник

2016-10-17 05:20:21 Phil

yesah.it показывает значение, но http-вызов getBasicUserInfo() инициируется только в первый раз (при загрузке сайта). После этого, когда я перемещаюсь между страницами, он не вызывается. Подумайте, как изменяется значение переменной (например, количество уведомлений или что-то еще), поэтому я должен каждый раз проверять этот вызов @Phil –

, поэтому, когда приходит новое уведомление, значение переменной обновляется. Итак, я должен проверить этот вызов на каждой странице ..., который я не могу сделать, поскольку заголовок остается таким же для всей страницы. @Phil –

@ SajeevC, какой должен быть триггер для обновления уведомления? Вы можете автоматически опроса, используя '$ interval', или можете вручную обновить данные с учетом определенных событий. Что это должно быть? – Phil

Вы должны быть в состоянии сделать это:

.when('/login', { 
     controller: 'LoginController', 
     templateUrl: 'loginView.html', 
     resolve: function(){ //your code here } 
     controllerAs: 'vm' 
    })

вместо того, чтобы получать его от контроллера

источник

2016-10-13 13:24:17 Fehintola

Это не сработает. Уже пробовал. @Fehintola –

Я думаю, что ваш вопрос может быть то, что включает в себя не может читать контроллер, поэтому вместо того, чтобы попытаться это:

<nav class="navbar-inverse navbar-fixed-top" role="navigation" ng-controller="CommonController as vm"> 
    <a href="#/home">Home</a> 
    <a href="#/notifications" >{{vm.commonId}}</a> 
</nav>

Обратите внимание, что вы также отсутствует синтаксис controllerAs поэтому я добавил, что.

И удалить ng-controller отсюда:

<div class="header" ng-include="'header.html'"></div>

источник

2016-10-17 05:15:47 Chrillewoodz

'ng-include' компилирует шаблон с текущей областью, поэтому проблема определенно не связана с вашей первой точкой. – Phil

@Phil Не уверен в этом, потому что у меня были проблемы с этим раньше. Я посмотрю, смогу ли я выкопать старый вопрос. – Chrillewoodz

angularJS- инициировать HTTP-вызов с контроллера не удалось

ответ

Смежные вопросы