Переключение углового обзора без обновления переменных

Я просто создаю простое приложение для изучения AngularJS и возникли проблемы с обновлением переменных при переключении представлений. Вот что у меня так далеко:

function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
  })

  .state('team', {
    url: '/team',
    templateUrl: 'app/main/team.html',
    controller: 'MainController',
    controllerAs: 'main'
  })
$urlRouterProvider.otherwise('/');
}

Вот часть моего контроллера:

function MainController($timeout, webDevTec, toastr, $resource, $scope) {
var vm = this;

var GetTeam = $resource('https://apisite.com/api_endpoint/:teamId', {teamId: '@id'});
vm.teamName = '';
function getTeamInfo(id) {
  var teamObj = GetTeam.get({teamId: id});
    $timeout(function(){
      vm.teamName = teamObj["name"];
    },100)        
};

vm.getTeamInfo = getTeamInfo;
}

Затем в моем main.html я вызываю getTeamInfo с помощью ng-клика:

 <ul class="list-group">
<li class="list-group-item" ng-repeat="team in main.teams" ng-click="main.getTeamInfo(team.id)"><a href="#/team">{{ team.name }}</a></li>
 </ul>

Нажав на эту ссылку, вы попадете в team.html:

<div class="row">
            <div class="col-sm-12">
                <h3>{{ main.teamName }}</h3>
                <ul class="list-group">
                  . . . 
                </ul>
            </div>
        </div>

По какой-то причинеmain.teamName"не обновляется. Я пробовал $scope.$apply(function(){vm.teamName = teamObj["name"]} подходить также без удачи. Я тожеconsole.log(teamObj["name"])' до vm.teamName а также 'console.log(vm.teamName)' после, чтобы увидеть, получаю ли я ожидаемые результаты, и я делаю. Я просто понятия не имею, почему он не обновляет новый вид.

Спасибо за вашу проницательность, терпение и время!

ОБНОВЛЕНИЕ 1

Я также попытался использовать $scope для моих переменных ($scope.teamName) и использовать $scope.$ Apply(function(){$scope.teamName = teamObj["name"]}) без удачи.

ОБНОВЛЕНИЕ 2

Я также попытался вызвать $scope.$ Apply(); после 'vm.teamName = teamObj["name"] "без удачи

Источник

1 ответ

Это выглядит как teamObj еще не заполнен в момент, когда вы назначаете vm.teamName

Вы бы сделали свою жизнь намного проще, если бы вы просто teamObj а не создание новой собственности.

Я создал план на основе модифицированной версии вашего кода, чтобы показать возможную реализацию. Я не мог заставить его работать с использованием синтаксиса controllerAs, и я не совсем уверен, почему (возможно, из-за некоторых проблем, связанных с совместным использованием контроллера; не уверен). В любом случае, надеюсь, это поможет вам.

DEMO

app.js

var app = angular.module('plunker', ['ui.router', 'ngResource']);

app.controller('MainController', MainController);
app.config(routeConfig);

function MainController($timeout, $scope, $resource) {

  // mock data
  var GetTeam = $resource('http://demo7592070.mockable.io/teams/:teamId', {teamId: '@id'});
  //var GetTeam = $resource('https://apisite.com/api_endpoint/:teamId', {teamId: '@id'});

  $scope.teamName    = 'undefined';
  $scope.getTeamInfo = getTeamInfo;

  function getTeamInfo(id) {

    var teamObj = GetTeam.get({teamId: id});

    $scope.teamName = teamObj.name;
    $scope.teamObj = teamObj;

  };

}

function routeConfig($stateProvider, $urlRouterProvider) {

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'main.html',
    controller: 'MainController'
  })

  .state('team', {
    url: '/team',
    templateUrl: 'team.html',
    controller: 'MainController'
  });

  console.log('ROUTECONFIG');

  $urlRouterProvider.otherwise('/');

}

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />

       <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-resource.js"></script>
    <script src="app.js"></script>

  </head>

  <body>
    <a ui-sref="home">home</a>
    <a ui-sref="team">team</a>
    <div ui-view=""></div>
  </body>

</html>

main.html

<h1>Home</h1>

<pre>$scope.teamName        => {{teamName}}</pre>
<pre>$scope.teamObj         => {{teamObj}}</pre>
<pre>$scope.teamObj.name    => {{teamObj.name}}</pre>

<button ng-click="getTeamInfo(1)">Get Team 1</button>

team.html

<h1>Team</h1>

<pre>$scope.teamName        => {{teamName}}</pre>
<pre>$scope.teamObj         => {{teamObj}}</pre>
<pre>$scope.teamObj.name    => {{teamObj.name}}</pre>

<button ng-click="getTeamInfo(2)">Get Team 2</button>
Источник
Другие вопросы по тегам