button - How to navigate to different pages using ui-route with angularjs? -


i have used tabs , routed pages ui-router, have changed layout , having buttons in side navigation panel route different pages on button click. no idea how go after trying many examples.

i need navigate dashboards.html when user clicks dashboard navigation menu.

here code:

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdmedia('gt-md')">              <md-list>       <md-item ng-repeat="item in menu">         <a>           <md-item-content md-ink-ripple layout="row" layout-align="start center">             <div class="inset">                <ng-md-icon icon="{{item.icon}}"  ></ng-md-icon>                <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>             </div>                        </md-item-content>            <md-divider></md-divider>         </a>       </md-item>       <md-divider></md-divider>      <md-item ng-repeat="item in admin">         <a>           <md-item-content md-ink-ripple layout="row" layout-align="start center">             <div class="inset">               <ng-md-icon icon="{{item.icon}}"></ng-md-icon>                <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>             </div>           </md-item-content>         </a>       </md-item>     </md-list> </md-sidenav>

here plnker

you use ui-sref="statename()" or ui-sref="statename({param: 'value'})" creating href on html, seems need add states app.config (configuration phase), below example can refer

note

ui-sref never work on button because create href tag dynamically , href attribute url, won't work on button element, i'd suggest wrap button inside anchor(<a></a>) tag

example

$stateprovider .state("statename": {   url: "/statename/:id",   template: "/test.html",   controller: 'testctrl' });

html

<a ui-sref="statename({id: 1})">     <button type="button"> </a>

this dynamically create href tag ``

<a  ng-href="#/statename/1">     <button type="button"> </a>

reference so answer

update

other work around need write ng-click event , ng-click function redirect on route using $state.go('statename'),

you need change html menu code below. i've added ng-click="$parent.navigate(item.icon)" & add new method in controller navigate $state.go(statename)

markup

 <md-item ng-repeat="item in menu">     <a>       <md-item-content md-ink-ripple layout="row" layout-align="start center"          ng-click="$parent.navigate(item.icon)">         <div class="inset">            <ng-md-icon icon="{{item.icon}}"  ></ng-md-icon>            <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>         </div>        </md-item-content>        <md-divider></md-divider>     </a>   </md-item>

code

$scope.navigate = function(routename){   $state.go(routename) };

working plunkr


Comments

Post a Comment

Popular posts from this blog

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more