We Keep Coding

AngularJS call custom directive (A form) on ng-click

New to angular. I have a custom directive which basically is a form that I want to call when a click event happens when a track within an album is clicked. Something like this:
- album1
*album1-track1
*album1-track2
- album2
So when I click Album1, I will be displaying tracks for album1. When I click album2, I will display tracks of album2 and not for album1. Now, when I click on track of album 2, I want to display the form (which is defined as a custom directive). Something like this:
- album1
*album1-track1 ---> (this track clicked) -----> (form displayed)
*album1-track2
- album2
Here is my code:
// HTML
<div class="wrapper wrapper-content">
<div>
<ul>
<li ng-repeat="album in vm.albums">
<a ng-click="vm.getAlbumTracks(album, $index)">{{album}}</a>
<ul ng-show="$index === vm.showingAlbumIndex">
<li ng-repeat="track in vm.albums.tracks"><a ng-click="vm.displayForm(track)">{{track}}</a></li>
</ul>
</li>
</ul>
<metadata-form></metadata-form>
<a ng-click="vm.newFunction('RAVI')">Click Me!</a>
</div>
Controller:
(function (){
angular.module('app.fileUploadForm').controller('FileUploadFormController', FileUploadFormController);
FileUploadFormController.$inject = ['$http', '$log', '$scope', '$state', '$rootScope', 'APP_CONFIG'];
function FileUploadFormController ($http, $log, $scope, $state, $rootScope, APP_CONFIG){
var vm = this;
vm.albums = init;
vm.getAlbumTracks = getAlbumTracks;
vm.newFunction = newFunction;
vm.displayForm = displayForm;
return init();
function init(){
$http.get('http://localhost:8080/api/albums').then(function(responseData){
// Parse the json data here and display it in the UI
vm.albums = [];
for(var album in responseData.data)
$scope.vm.albums.push(album);
$log.debug(angular.toJson(responseData, true));
})
}
function getAlbumTracks(album, index){
$http.get('http://localhost:8080/api/albums/'+album).success(function(trackResponse){
//parse each album and get the track list
//alert('Function getAlbumTracks () called');
vm.showingAlbumIndex = index;
vm.albums.tracks = [];
for(var i = 0; i<trackResponse.tracks.length; i++)
vm.albums.tracks.push(trackResponse.tracks[i].title);
$log.debug(vm.albums.tracks);
})
}
function displayForm(track, index){
// display the form for that track only
}
function newFunction(name){
$log.debug("Hello " + name);
}
}
})();
Custom directive.js
(function (){
'use strict';
angular.module('app.fileUploadForm').directive('metadataForm', metadataForm);
function metadataForm(){
return {
restrict: 'EA',
templateUrl: 'app/fileUploadForm/metadata-form.html'
};
};
})();
metadata-form.html file:
<div ng-show="showForm">
<form name="uploadForm" ng-controller="FileUploadFormController as uploadCtrl">
<br>UPC:<br>
<input type="text" ng-model="UPC">
<br>
<br>Artist:<br>
<input type="text" ng-model="artist">
<br>
<br>Genre:<br>
<input type="text" ng-model="genre">
<br>
<br>Album:<br>
<input type="text" ng-model="album">
<br>
<br>Hold Date:<br>
<input type="text" ng-model="holddate">
<br>
<br>SomeField:<br>
<input type="text" ng-model="somefield">
</form>
<!-- trying the date picker here
<h4>Standard date-picker</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
--><br>
<button class="btn btn-primary block m-b" ng-click="uploadFile()">Send to Ingestion</button>
Any idea how to achieve this ?

To begin with, I think your custom directive shouldn't use the same controller of your first code. Remove ngController directive in metadataForm.
Use data binding to get track information when the directive is called:
(function (){
'use strict';
angular.module('app.fileUploadForm').directive('metadataForm', metadataForm);
function metadataForm(){
return {
restrict: 'EA',
templateUrl: 'app/fileUploadForm/metadata-form.html',
scope: {}, // Isolated scope
bindToController: {
track: '='
}
controller: controllerFunc
controllerAs: 'vm'
};
function controllerFunc() {
var vm = this;
// Your track is accessible at vm.track
}
};
})();
You have to change the ng-model in metadataForm template to bind your data with data from your controller.
To make the metadataForm directive appear on click, you could use ng-ifdirective:
// HTML
<div class="wrapper wrapper-content">
<div>
<ul>
<li ng-repeat="album in vm.albums">
<a ng-click="vm.getAlbumTracks(album, $index)">{{album}}</a>
<ul ng-show="$index === vm.showingAlbumIndex">
<li ng-repeat="track in vm.albums.tracks"><a ng-click="vm.displayForm(track)">{{track}}</a></li>
</ul>
</li>
</ul>
<metadata-form ng-if="vm.isFormDisplayed" track="vm.displayedTrack"></metadata-form>
<a ng-click="vm.newFunction('RAVI')">Click Me!</a>
</div>
And in the controller you described:
function displayForm(track, index){
vm.isFormDisplayed = true;
vm.displayedTrack = track;
}

Unable to change the name of login button using ng-show

I am setting a boolean value to true after user logs in and I want to update the login button status to logout. I tried using ng-show but apparently its not working.
States:
myApp.config(function ($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/Home");
var header = {
templateUrl: 'commonViews/Header.html',
controller: function ($scope) {
}
};
var footer = {
templateUrl: 'commonViews/Footer.html',
controller: function ($scope) {
}
};
// ui router states
$stateProvider
.state('Home', {
url: "/Home",
views: {
header: header,
content: {
templateUrl: 'views/HomePage.html',
controller: function ($scope) {
}
},
footer: footer
}
})
.state('LoggedIn', {
url: "/LoggedIn",
views: {
'header': header,
'content': {
templateUrl: 'views/LoggedIn.html',
controller: function ($scope) {
}
},
'footer': footer
}
});
});
UserService:
myApp.factory('UserService', function ($http, $localStorage, AuthenticationService) {
return {
logIn: function (email, password) {
return $http.post('rs/loginResource/login', {email: email, password: password})
.then(function (data) {
AuthenticationService.isLogged = true;
alert("Authentication loggedIn inside login controller: " + AuthenticationService.isLogged);
return data;
})
.catch(function (error) {
console.log(error);
});
},
logOut: function () {
if (AuthenticationService.isLogged) {
AuthenticationService.isLogged = false;
delete $localStorage.token;
}
}
};
});
myApp.factory('AuthenticationService', function () {
var auth = {
isLogged: false
};
return auth;
});
Login controller:
myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$sessionStorage', '$state', '$window', 'UserService', 'AuthenticationService', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state, $window, UserService, AuthenticationService)
{
$scope.token = "";
$scope.$storage = $localStorage;
$scope.loginForm = function (email, password) {
if (email !== undefined && password !== undefined) {
UserService.logIn(email, password).then(function (response) {
$localStorage.token = response.data.token;
if ($localStorage.token) {
$state.go('LoggedIn');
alert("scope loggedIn inside login controller: " + AuthenticationService.isLogged);
}
}).catch(function (status, data) {
console.log(status);
console.log(data);
});
}
$scope.logout = function logout() {
UserService.logOut().success(function () {
$state.go('/');
}).error(function (status, data) {
console.log(status);
console.log(data);
});
};
};
}]);
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head></head>
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
</body>
</html>
Header html:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<b>Logout</b>
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<!---------------------------------Login Controller Here------------------------------------->
<li>
<div class="row">
<div class="col-md-12">
<form class="form" role="form" method="post" ng-controller="loginController" ng-submit="loginForm(email, password)" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" ng-model="email" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" ng-model="password" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
After user is logged in, it changes the status to logout for split second and then back to login status again. I am not sure what's going wrong?

Add AuthenticationService to the scope of your controller,
$scope.AuthenticationService = AuthenticationService;
and remove $scope from your view/template
<ul class="nav navbar-nav navbar-right" ng-controller="loginController">
<li class="dropdown">
<b>Logout</b>
<b>Login</b> <span class="caret"></span>
</li>

Put an isLoggedIn() function in your header controller:
myApp.config(function ($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/Home");
var header = {
templateUrl: 'commonViews/Header.html',
controller: function ($scope, AuthenticationService) {
$scope.isLoggedIn = function() {
return AuthenticationService.isLogged;
});
}
};
var footer = {
templateUrl: 'commonViews/Footer.html',
controller: function ($scope) {
}
};
// ui router states
And in your header HTML use that function:
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
ng-show="isLoggedIn()" ng-click="logout()"><b>Logout</b>
</a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
ng-show="!isLoggedIn()">
<b>Login</b> <span class="caret"></span>
</a>
UPDATE
Your login controller's scope is a child of the header controller's scope. Your ng-show directives are not in your login controller's scope. By putting functions that query the AuthenticationService.isLogged state in the correct scope, the ng-show directives should work properly.

There are 2 issues in your code
AuthenticationService.isLogged
is not updated after successful login with UserService
You don't need to have $scope in your templates as any Angular expression that you pass in your HTML template will be resolved against the current scope.
I would suggest not to expose your services onto your view layer. Just add a property isLoggedIn on your scope which will determine whether to show Login or Logout buttons.
myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$sessionStorage', '$state', '$window', 'UserService', 'AuthenticationService', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state, $window, UserService, AuthenticationService)
{
$scope.token = "";
$scope.$storage = $localStorage;
// new property to hold login status
$scope.isLoggedIn = false;
$scope.loginForm = function (email, password) {
if (email !== undefined && password !== undefined) {
UserService.logIn(email, password).then(function (response) {
$localStorage.token = response.data.token;
if ($localStorage.token) {
// cache the login status for use in other controllers
AuthenticationService.isLogged = true;
// update the scope for use in templates
$scope.isLoggedIn = true;
$state.go('LoggedIn');
}
}).catch(function (status, data) {
console.log(status);
console.log(data);
});
}
$scope.logout = function logout() {
UserService.logOut().success(function () {
// cache the login status for use in other controllers
AuthenticationService.isLogged = false;
// update scope for use in templates
$scope.isLoggedIn = false;
$state.go('/');
}).error(function (status, data) {
console.log(status);
console.log(data);
});
};
};
}]);
With this, in your templates, you can just check for isLoggedIn like below
<ul class="nav navbar-nav navbar-right" ng-controller="loginController">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown"
ng-show="isLoggedIn"
ng-click="logout()">
<b>Logout</b></a>
<a href="#" class="dropdown-toggle"
data-toggle="dropdown"
ng-show="!isLoggedIn">
<b>Login</b> <span class="caret"></span>
</a>
</li>
</ul>

$rootScope to set active tab not working

would anyone be able to help me on this issue I am having?
I have a NavCtrl for manage my active tag, I was able to change the active tab when click on the menu item, however when I click on the link in the body views, it take me to the page I want to, but the active tag is not change.
//controller for nevigation menu
sp.controller('NavCtrl', ['$scope', 'auth', '$window','$rootScope', function ($scope, auth, $window,$rootScope) {
$scope.LogOut = auth.logOut;
$scope.isLoggedIn = auth.isLoggedIn;
$scope.tab = $rootScope.navTav;
$scope.toTop = function(){
$window.scrollTo(0, 0);
};
}]);
I try to use the $rootScope to set the navTab, but it's still not working
//setting root scope
sp.run(function($rootScope) {
$rootScope.navTav = 1;
})
ui-Router
.state('qaanswer', {
url: '/qa/{quesId}',
views: {
view50': {
templateUrl: './qa/qaanswer.html',
controller: 'QAAnswerCtrl'
},
'view60': {
templateUrl: './shareviews/activityupdates.html',
controller: 'HomeCtrl'
}
},
onEnter:['$rootScope',function($rootScope){
$rootScope.navTav = 5;
}]
Thank you so much for the help

Update HTML :
<body ng-controller="NavCtrl">
<!-- Desktop Menu -->
<div>
<div>
<ul>
<a href="#/home" ng-class="{active: navTab === 1}" ng-click="navTab = 1">
<li>Home</li>
</a>
<a href="#/qa" ng-class="{active: navTab === 2}" ng-click="navTab = 2">
<li>QA</li>
</a>
</ul>
</div>
</div>
<div>
<div>
<div class="row">
<div ui-view="view50"></div>
<div ui-view="view60"></div>
</div>
</div>
</div>
</body>
Working plunker

You can simplify your implementation and have no issues. Simply use the $rootScope variable directly in your template along side ng-class like so:
<body ng-controller="NavCtrl">
<a ng-class="{red: $root.navTab===0}" ui-sref="first">first</a>
<a ng-class="{red: $root.navTab===1}" ui-sref="second">second</a>
<div ui-view></div>
</body>
Then update $rootScope in your controllers.
.controller('NavCtrl', function($scope, $rootScope) {});
.controller('FirstCtrl', function($scope, $rootScope) {
$rootScope.navTab = 0;
});
.controller('SecondCtrl', function($scope, $rootScope) {
$rootScope.navTab = 1;
});
Your states get to stay relatively simple:
.state('first', {
url: '/first',
templateUrl: 'first.html',
controller: 'FirstCtrl'
})
.state('second', {
url: '/second',
templateUrl: 'second.html',
controller: 'SecondCtrl'
})
plunker
Ideally you would make a directive for such a task, and avoid using $rootScope. A simple way to do this is to broadcast a message whenever you land on a new page, then listen on that event in your tab directive and flip the correct tab as active.

angularjs ng-show: show menu after successful login

I'm trying to show the navigation bar once the user logs in successfully. but the navigation-bar is still hidden even after the user logs in.
here is a part of the index.html
<header id="Header1" data-ng-controller="navigationController">
<!-- Navigation bar -->
<nav class="navbar navbar-inverse" id="nav1" ng-hide="isConnected">
<div class="collapse navbar-collapse">
<ul id="Ul1" class="nav navbar-nav" style="color: white; font-weight: bolder; font-family: Arial; border-radius: 5px;">
<!-- <li class="nav navbar-brand" id="Li1" style="padding: 0px 0px 0px 0px;">
<img src="favicon.ico" height="20" width="20" />
</li>-->
<li id="Li2" data-ng-class="{'active':isActive('/home')}">
<a data-original-title="Home page." class="disable-click" href="#/home">Home</a>
</li>
<li data-ng-class="{'active':isActive('/demo')}">
<a data-original-title="Demonstration page." class="disable-click" href="#/demo">Demonstration</a>
</li>
</ul>
</div>
</nav>
</header>
the controller navigationController.js is
'use strict';
app.controller('navigationController',
function ($scope, $location, $rootScope, AuthenticationService) {
debugger;
$scope.isActive = function (path) {
return $location.path().substr(0, path.length) == path;
};
$scope.isConnected = !($rootScope.globals.currentUser);
console.log($scope.isConnected);
});
i store the current user in this service
service.SetCredentials = function (username, password) {
var authdata = Base64.encode(username + ':' + password);
$rootScope.globals = {
currentUser: {
username: username,
authdata: authdata
}
};
$http.defaults.headers.common['Authorization'] = 'Basic ' + authdata;
$cookieStore.put('globals', $rootScope.globals);
};
the binding is not working after the login, except when i refresh the menu is shown (when the cookie has became full). any solution please

Your isConnected property is only evaluated once when the controller is instantiated. When the user logs in there is nothing to re-evaluate isConnected
You could set up a watch like this to have it re-evaluate:
'use strict';
app.controller('navigationController',
function ($scope, $location, $rootScope, AuthenticationService) {
debugger;
$scope.isActive = function (path) {
return $location.path().substr(0, path.length) == path;
};
$rootScope.$watch('globals', function(newVal, oldVal) {
$scope.isConnected = !($rootScope.globals.currentUser);
}, true);
});
note it might be possible you can add the watch directly to $scope instead of $rootScope as the globals property should be inherited prototypically, though I haven't tested this to verify

Try this
'use strict';
app.controller('navigationController',
function ($scope, $location, $rootScope, AuthenticationService) {
...
$scope.isConnected = function() {
return !($rootScope.globals.currentUser);
};
});
And do not change ng-hide value to ng-hide="isConnected()", keep it as ng-hide="isConnected"
<nav class="navbar navbar-inverse" id="nav1" ng-hide="isConnected">
...

How to force update view from directive event in Angularjs

I have a work and stuck it 2 days. Hope everyone know angularjs help me :).
I need to force a change html when have a change on model. Example:
This is html code:
<!--CAKE LIST-->
<div id="cakelist" ng-controller="CakeListCtrl">
<ul class="thumbnails cake-rack" cakes="cakes" ng-model="cakesModel">
<li class="pull-left cake-unit" ng-repeat="cake in cakes" cake="cake">
<div class="thumbnail">
<a href="{{cake.link}}">
<img ng-src="{{cake.avatar}}" alt="{{cake.title}}" class="img img-rounded img-polaroid" />
</a>
<h5 class="pull-left">
{{cake.title}}
</h5>
Shared
<div class="clearfix"></div>
<ul class="attrs unstyled">
<li>
<div class="pull-left">Mã sản phẩm</div>
<span class="pull-right">{{cake.type}}</span>
</li>
</ul>
</div>
</li>
</ul>
<input type="button" class="btn btn-primary" value="add more cake" class="cake-more" ng-click="addCake()" />
<input type="button" class="btn btn-danger" value="clear cake" class="cake-clear" ng-click="clear()" />
<img alt="Loading" src="/imagesroot/ajax-loader-1.gif" loading-stage="loadingStage" class="cake-loading"/>
</div>
now a have a menu outside of controller:
<div id="cake-catalog" class="cake-catalog">
<ul class="nav">
<li class="active">
<a cake-menu-unit href="sacmscategory50c2302b7ff0a">Nhân vật hoạt hình</a>
</li>
<li>
<a cake-menu-unit href="sacmscategory50c2308717a84">Động vật</a>
</li>
<li>
<a cake-menu-unit href="sacmscategory50c2309da00f6">Tạo hình 3D</a>
</li>
<li>
<a cake-menu-unit href="sacmscategory50c230ba08d9d">Các mẫu hình khác</a>
</li>
</ul>
</div>
I have angular module for add and clear:
var CakeList = angular.module('CakeList', ['ngResource']);
CakeList.service('CakeService', function($rootScope) {
var cakedata = [{avatar:"test", title: "test2"}];
$rootScope.loadCake = false;
var bf = function() { $rootScope.loadCake=true; };
var at = function() { $rootScope.loadCake=false; };
return {
cakes: function() {
bf();
at();
return cakedata;
},
addCake: function() {
bf();
cakedata.push(cake);
at();
},
clear: function() {
cakedata = []; console.log('clear');
}
};
});
CakeList.directive('cakeCatalog', function($rootScope, CakeService) {
var clickfn = function(e) {
e.preventDefault();
CakeService.clear();
};
var nonclickfn = function(e) {
e.preventDefault();
console.log('nonclickfn');
};
return {
restrict: "C",
link: function(scope, element, attrs) {
$rootScope.$watch('loadCake', function(newValue, oldValue) {
if (newValue===true) {
element.find('a').off('click').on('click', nonclickfn);
}
else {
element.find('a').off('click').on('click', clickfn);
}
});
}
};
But when runtime, i put click on a element of menu then the list cake not clear, even i check console.log in console box and see the cakedata really clear!. Can you help me this case ? :)

First of all, the design seems a bit weird by using everywhere $rootScope (among other things). But that's not the cause of the problem. The problem is the $watch which is not correct.
First of all, use loadCake as an object instead of a primitive type:
var loadCake = { loaded: false};
Use the objectEquality parameter in your $watch statement:
$rootScope.$watch('loadCake', function(newValue, oldValue) {
if (!newValue) return;
if (newValue.loaded === true) {
element.find('a').off('click').on('click', nonclickfn);
}
else {
element.find('a').off('click').on('click', clickfn);
}
}, true);