javascript - Issue with automatic reload of side menu -
so have side menu in ionic application present in templates. here how have set in app.js:
.state('app', { url: "/app", abstract: true, templateurl: "templates/rubyonic/menu.html", controller: 'appctrl', }) .state('app.studies', { url: "/studies", views: { 'menucontent': { templateurl: "templates/rubyonic/studies.html", } } }) .state('app.study', { url: "/studies/:studynoderef", views: { 'menucontent': { templateurl: "templates/rubyonic/overview.html", } } })
here snippet of code controller:
$scope.nodeid = $stateparams.studynoderef; $scope.collections = []; $scope.studies = []; studies.all().then(function(data) { $scope.x = angular.fromjson(data.allprojects); $scope.studies = angular.fromjson($scope.x.list); }); studies.fetchcollection($scope.nodeid).then(function(data){ // $scope.y = angular.fromjson(data.list); $scope.collections = angular.fromjson(angular.fromjson(data.list)[0].collections); console.log($scope.collections); // $scope.$apply(); });
studies.all() makes call studies service makes http call. each study has unique noderef passed onto study.fetchcollection makes http call. here studies service:
.factory('studies',function($http,$filter,$q){ return { all: function(){ var deferred = $q.defer(); $http.get("http://localhost/platform/loginsuccess.json").success( function(data){ // angular.copy(data, studies); deferred.resolve(data); } ); return deferred.promise; }, fetchcollection: function(collectionid) { var deffered = $q.defer(); $http({ method: 'post', url: 'http://localhost/platform/project/fetch.json', params: { 'noderef': collectionid } }).success(function(data) { deffered.resolve(data); }); return deffered.promise; } }; })
so iterate through collections in menu.html displayed side menu in templates:
<ion-list> <ion-item ng-repeat="collection in collections" nav-clear menu-close ng-click="go('app.studies')" class="item item-icon-left brand-base-text-color"> <i class="icon ion-ios-paper"></i> {{collection.name}} </ion-item> </ion-list>
i want menu list automatically update collections every time click on study. not sure how appreciated
i think 1 of causes of problem might related (from docs):
in state controllers, $stateparams object contain params registered state. not see params registered on other states, including ancestors.
so looks trying access parameter you've registered on nested child state it's parent state.
try giving 'menucontent' view own controller can access $stateparam property need. here's demo illustrates issue:
app.js
var app = angular.module('plunker', ['ui.router']); app.controller('appctrl', function($scope, $stateparams){ $scope.foo = 'bar' $scope.stateparams = $stateparams; }); app.config(function($stateprovider, $urlrouterprovider){ $urlrouterprovider.otherwise('/home'); $stateprovider .state('app', { url: "/app", abstract: true, template: "<div><div ui-view='menucontent'></div></div>", controller: 'appctrl', }) .state('app.studies', { url: "/studies/:visibleparam", views: { 'menucontent': { templateurl: "studies.html", controller: function($scope, $stateparams){ $scope.stateparams = $stateparams } } } }) .state('app.study', { url: "/study/:studynoderef", views: { 'menucontent': { templateurl: "study.html", } } }) })
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" /> </head> <body> <ul> <li><a ui-sref="app.study({studynoderef: 'bar'})">app.study({studynoderef: 'bar'})</a></li> <li><a ui-sref="app.studies({visibleparam: 'foo'})">app.studies({visibleparam: 'foo'})</a></li> </ul> <div ui-view></div> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> <script src="app.js"></script> </body> </html>
studies.html
<h1>studies (has own controller)</h1> <p>$scope.stateparams => </p> <pre>{{stateparams}}</pre>
study.html
<h1>study (parent controller only)</h1> <p>$scope.stateparams => </p> <pre>{{stateparams}}</pre>
Comments
Post a Comment