angularjs - angular link tag uses custom service -
my app uses ngroute, when link tapped page injected in ngview.
take advantage of page controller when page visited fires "togglerfactory" service .
how can call menutoggle() of service whenever link tapped not first time page visited. thanks
//---routing.js---------------------------------- (function () { 'use strict'; angular .module('appmodule') .config(['$routeprovider', routing]); function routing ($routeprovider) { $routeprovider .when('/page1', { url: "/page1", templateurl: 'views/page1.html', controller: 'page1ctrl' }) .when('/page2', { url: "/page2", templateurl: 'views/page2.html', controller: 'page2ctrl' }) } })(); //---menutoggle.js---------------------------------- (function () { 'use strict'; angular.module('appmodule') .factory('togglerfactory', function($rootscope) { var togglerfactory = {}; togglerfactory.menutoggle = function(){ $rootscope.clicked = !$rootscope.clicked; } return togglerfactory; }); }()); //---page1ctrl.js---------------------------------- (function () { 'use strict'; angular .module('appmodule') .controller('page1ctrl', ['togglerfactory', page1ctrl]); function page1ctrl(toggler) { toggler.menutoggle(); } })();<!doctype html> <html lang="en" ng-app="appmodule"> <head> <meta charset="utf-8"> <title>document</title> <link rel="stylesheet" href="index.css"> <base href="http://localhost:63342/students/"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.5.0-rc.1/angular-animate.js"></script> <meta name="viewport" content="width=device-width" /> <script src="app.js"></script> <script src="services/routing.js"></script> <script src="services/menutoggle.js"></script> <script src="controllers/menutogglectrl.js"></script> <script src="controllers/mainmenuctrl.js"></script> <script src="controllers/page1ctrl.js"></script> <script src="controllers/page2ctrl.js"></script> </head> <body> <header ng-controller="menutogglectrl"> <button class="menuleft" type="button" ng-model="clicked" ng-click="menutoggle()">☰</button> <label id="pagetitle" class="pagetitle">select item list</label> <button class="menuright" type="button">⋮</button> </header> <section class="mainmenu" ng-controller="mainmenuctrl" ng-if="!clicked"> <ul> <li ng-repeat="item in menuitems"> <a href="#/{{item.name}}"> <image ng-src="images/{{item.image}}.png"></image> {{item.name}} </a> </li> </ul> </section> <main ng-view></main> <footer ng-controller="menutogglectrl" ng-if="clicked"> <ul class="horizontal-style"> <li><button type="button">no</button></li> <li><button type="button">extra</button></li> <li><button type="button">yes</button></li> </ul> </footer> </body> </html> <!-- begin snippet: js hide: false -->
Comments
Post a Comment