angularjs - How to modify HTML content based on angular controller -
i trying build login page , functionality page using angularjs spa.
i have following controller: - logincontroller - predictioncontroller , following single page: - home.html : binded logincontroller - trend.html : binded predictioncontroller - index.html : has no controller i have navigation panel in index.html , want modify(add or remove) number of tabs based on login. don't want write navigation panel logic in each page reusable. unable figure out way using additional controller because using ng-route guess won't allow me use multiple controller same page.
here html code snippet index.html:
<body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#/">myproject</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#/">home</a></li> <li><a href="#trend">trend</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div ng-app="chartapp"> <div ng-view></div> </div> </body> here code controller:
var app = angular.module('chartapp', ['ngroute']); app.factory('userverified', function() { return {bool: false}; }); app.config(function ($routeprovider) { $routeprovider .when('/',{ templateurl: 'pages/home.html', controller: 'logincontroller' }) .when('/trend', { templateurl: 'pages/trend.html', controller: 'predictioncontroller' }) }); app.controller('logincontroller', ['$scope', '$http', 'userverified', function($scope, $http, userverified){ $scope.haspermission = userverified.bool; $scope.getauthentication = function(){ console.log($scope.userid, $scope.pwd) $http.get('/getauth', { params: { user_id: $scope.userid, pwd: $scope.pwd } }).success(function (response){ console.log(response); userverified.bool = response; $scope.haspermission = userverified.bool; }); } }]); i'm not sure if information enough please edit or let me know if i'm missing information.
i believe you're going have move ng-app directive body, , create navigationcontroller can require userverified factory , maintain state of navigation.
you add ng-controller directive navbar explicitly, , router should work same.
the html might this.
<body ng-app="chartapp"> <nav ng-controller="navigationcontroller" class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- display if $scope.loggedin --> <a ng-show="loggedin" class="navbar-brand" href="#/">myproject</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#/">home</a></li> <li><a href="#trend">trend</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div ng-view></div> </body> navigationcontroller
app.controller('navigationcontroller', function($scope, userverified) { $scope.$watch(function() { return userverified.bool; }, function(state, oldstate) { $scope.loggedin = state; }); }); 
Comments
Post a Comment