angularjs - Angular : Unable to load data and change view successfully -
i have page contains ng-view. embedded template table that, when row clicked on switches detail template row. have been unable controller gather 'detail' data , display it.
with code below, data collected via $http.get, , 'detail' view shown, data not bound 'detail' view.
can please explain going wrong here?
controller.js
(function(){ var appname = 'theapp' var app = angular.module('theapp', ['ngroute']) .config(function appconfig($locationprovider, $routeprovider){ $routeprovider //route called when "show location" called below. .when( '/' + appname + '/location/:id', { controller: 'controller', templateurl: function(params){ return appname + '/location/detail/'+params.id; } }) .when('/' + appname + '/location',{ controller: 'controller', templateurl: function(params){return appname + '/location/list'} }) $locationprovider.html5mode(true); }); app.controller('controller', function($scope, $location, $window, $http){ $http.get('/service/data/location/list').success(function(locationdata) { $scope.locationlist = locationlist; $scope.locationdetail = locationdetail; }); $scope.showlocation = function(id){ $http.get('/service/data/locations/detail/'+id) .success( function(locationdetail){ //data exists here $scope.locationdetail = locationdetail; //data updated $scope @ point. $location.url($location.path() + '/' + id); //templateurl shown, without data. }); }; } ) })();
in angular data not persist across views. once view goes away, data on view's $scope gets wiped out. need save data in factory.
take @ this post, explains how pass data 1 view another.
angular .module('app', []) .factory('myfactory', myfactory) .controller('myctrl1', myctrl1) .controller('myctrl2', myctrl2); function myfactory() { var fromsender = null; return { setsender: function(sender) { fromsender = sender; }, getsender: function() { return fromsender; } }; } function myctrl1(myfactory) { var vm = this; vm.setsender = myfactory.setsender; } function myctrl2(myfactory) { var vm = this; vm.getsender = myfactory.getsender; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> <div ng-app="app"> <div ng-controller="myctrl1 ctrl1"> controller 1: <br> <button ng-click="ctrl1.setsender('from controller 1')">send myfactory</button> </div> <hr> <div ng-controller="myctrl2 ctrl2"> controller 2: <br> value ctrl1 via myfactory: {{ctrl2.getsender()}} </div> </div>
Comments
Post a Comment