3

我只是在构建一个简单的应用程序来学习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 中，我通过 ng-click 调用 getTeamInfo：

 <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.teamName）上使用 $scope 并使用 $scope.$apply(function(){$scope.teamName = teamObj["name"]}) 没有运气。

更新 2

我也试过叫 $scope.$apply(); 在 'vm.teamName = teamObj["name"]' 之后没有运气

4

1 回答 1

0

在您分配时，它看起来teamObj尚未填充vm.teamName

如果您只是参考teamObj而不是创建新属性，那么您的生活会变得更加轻松。

我根据您的代码的修改版本制作了一个 plunker，以显示可能的实现。我无法使用controllerAs语法让它工作，我不完全确定为什么（可能是因为与共享控制器相关的一些问题；不确定）。总之，希望对你有所帮助。

演示

应用程序.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('/');

}

索引.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>

团队.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>
于 2015-07-15T08:31:41.993 回答