angularjs - Angular ui router controlleras syntax not working -
i trying develop angular app using ui router, stuck trying controlleras syntax working correctly.
my stateprovider looks this
$stateprovider .state('microsite', { url: "/", templateurl: "microsite.tmpl.html", abstract: true }) .state('microsite.home', { url: "", templateurl: "home.tmpl.html", controller: 'micrositecontroller vm', data: { page_name: 'introduction' } }) .state('microsite.features', { url: "/features", templateurl: "features.tmpl.html", controller: 'micrositecontroller vm', data: { page_name: 'features' } }) .state('microsite.about', { url: "/about", templateurl: "about.tmpl.html", controller: 'micrositecontroller vm', data: { page_name: 'about' } });
as can see setup abstract default view, , 3 pages. have assigned data object page_name each page. feeds controller
myapp.controller('micrositecontroller', ['$state', function($state) { var vm = this; vm.page_name = $state.current.data.page_name; vm.sidenav_locked_open = false; vm.togglesidenav = function() { if ($mdmedia('gt-sm')) { vm.sidenav_locked_open = !vm.sidenav_locked_open; } else { $mdsidenav('left').toggle(); } } }]);
and delivers name page via vm.page_name variable. not happening. variable never makes page. have vm.togglesidenav function suppose open , close sidenav, never gets called.
the toolbar sidenav button this
<md-toolbar layout="row" class="md-whiteframe-glow-z1 site-content-toolbar"> <div class="md-toolbar-tools docs-toolbar-tools" tabindex="-1"> <md-button class="md-icon-button" ng-click="vm.togglesidenav()" aria-label="toggle menu"> xxx </md-button> <h1>{{vm.page_name}}</h1> </div> </md-toolbar>
here plnkr example http://plnkr.co/edit/na5zkf?p=preview
i looking me figure out last piece on how togglesidenav function called when click on xxx button, , how title display in toolbar.
from docs:
controller (optional) string function
controller fn should associated newly related scope or name of registered controller if passed string. optionally, controlleras may declared here.
controller: "myregisteredcontroller" controller: "myregisteredcontroller fooctrl" controller: function($scope, myservice) { $scope.data = myservice.getdata(); }
-- ui router $stateprovider api reference.
according docs, controller declaration correct.
controller: 'micrositecontroller vm'
you need problem elsewhere.
i have vm.togglesidenav function suppose open , close sidenav, never gets called.
vm.togglesidenav = function() { if ($mdmedia('gt-sm')) { vm.sidenav_locked_open = !vm.sidenav_locked_open; } else { $mdsidenav('left').toggle(); } }
are $mdmedia
, $mdsidenav
declared on global name space? or did fail inject them? if $mdmedia('gt-sm')
undefined, vm.sidenav_locked_open
never toggled.
update
good catch on $mdmedia, did not fix problem. updated plnkr
using plnkr, modified template add button invoke togglesidenav
function.
it invokes function error:
referenceerror: $mdmedia not defined @ vm.togglesidenav
the new plnkr
next update
ugg, got me again, put in $mddialog instead of $mdmedia. discovered needed $mdsidenav. fixed button works,
xxx
button still not.
the problem xxx
button on root state, root state has no specified controller. change config put controller on root state.
$stateprovider .state('microsite', { url: "/", templateurl: "microsite.tmpl.html", //put controller on root state controller: 'micrositecontroller vm', abstract: true })
the newer plunkr.
Comments
Post a Comment