angularjs - Switching Angular view not updating variables -
i'm building out simple app learn angularjs , having trouble updating variables when switching views. here's have far:
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('/'); } here's part of controller:
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; } then in main.html call getteaminfo ng-click:
<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> clicking on link take team.html:
<div class="row"> <div class="col-sm-12"> <h3>{{ main.teamname }}</h3> <ul class="list-group"> . . . </ul> </div> </div> for reason "main.teamname" not updating. i've tried $scope.$apply(function(){vm.teamname = teamobj["name"]} approach no luck. did 'console.log(teamobj["name"])' before vm.teamname , 'console.log(vm.teamname)' after see if expected results , do. have no idea why it's not updating new view.
thank insight, patience, , time!
update 1
i tried using $scope on variables ($scope.teamname) , using $scope.$apply(function(){$scope.teamname = teamobj["name"]}) no luck.
update 2
i tried called $scope.$apply(); after 'vm.teamname = teamobj["name"]' no luck
it looks teamobj not populated yet @ point when assign vm.teamname
you make life easier if reference teamobj rather creating new property.
i made plunker based on modified version of code show possible implementation. couldn't work using controlleras syntax , i'm not entirely sure why (possibly because of issues related sharing controller; not sure). anyway, of you.
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, , 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>
Comments
Post a Comment