Question

我只是构建了一个简单的应用来学习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”]'之后没有运气

Answer 1

在您指定vm.teamName

时，似乎尚未填充teamObj

如果您只是引用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('/'); }而不是创建新属性，那么您的生活会更轻松。

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

DEMO

<强> app.js

<!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>

<强>的index.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>

<强> main.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>

<强> team.html

string uriWithoutLastSegment = Request.Url.AbsoluteUri.Remove(
  Request.Url.AbsoluteUri.Length - Request.Url.Segments.Last().Length );

切换角度视图不更新变量

1 个答案: