I am trying to display the text of link on click event of each link, for that i have written one directive 'showtext' inside which i gets text of the link, howerver i am unable to pass that value through function $scope.$apply("setMessage($element.text)").I also try $scope.message = $element.text inside directive but still its not working.plz help
<div ng-controller="menu">
<a href="#" showtext>Click</a>
<a href="#" showtext>Click1</a>
<a href="#" showtext>Click2</a>
<button showtext>OK</button>
<p ng-model="message">You say {{message}}</p>
</div>
var app = angular.module('Demo',[]);
app.factory('shared',function(){
});
app.controller('menu',function($scope){
$scope.message = "" ;
$scope.setMessage = function(msg){
$scope.message = msg;
}
});
app.directive('showtext',function(){
return {
link: function($scope,$element){
$element.bind('click',function(){
console.log($element.text());
$scope.$apply("setMessage($element.text)");
});
}
}
});
If you replace
$scope.$apply("setMessage($element.text)");
with
$scope.$apply(function () {
$scope.setMessage($element.text())
});
everything works fine.
Related
In my view
<button type="button"
ng-disabled="isProcessing"
ng-click="login.ssoFacebook()"
class="button button-primary">
<span class="icon icon-social-facebook"></span>
Login Using Facebook
</button>
When I click the button facebook doesn't work
My controller
this.ssoFacebook = function(){
// intiate
ssoAuth.facebook.initiate()
.then(function(customer){
if (!customer) throw 'error system';
authService.setCurrentSession(customer, $scope);
$timeout(function() {
$scope.$emit(GLOBAL_EVENTS.SYSTEM.ACCOUNT.SESSION.LOGIN_SUCCESS);
}, 500);
// redirect or something
$state.go('products', {}, {reload: true});
})
.catch(function(error){
$scope.$emit(GLOBAL_EVENTS.SYSTEM.ACCOUNT.SESSION.LOGIN_FAILED, error);
});
};
Am I doing something wrong? thanks advance
Replace this code,
this.ssoFacebook = function(){
...
}
with,
$scope.login = {};
$scope.login.ssoFacebook = function(){
..
}
This may be the issue.
If you want use function from controller instead of scope, you need mark this in html in attribute ng-controller
ng-controller="ControllerName as login"
and below you can use
<button type="button"
ng-disabled="isProcessing"
ng-click="login.ssoFacebook()"
class="button button-primary">
<span class="icon icon-social-facebook"></span>
Login Using Facebook
</button>
Change your ng-click to
ng-click="ssoFacebook()"
and in your controller change with :
$scope.ssoFacebook = function(){
...
}
I apologize of a mess but this is the first time on stackoverflow ;)
Link to jsfiddle
http://jsfiddle.net/1u1oujmu/19/
I have problem with communication between directives and refresh ng-repeat.
I have two pages homePage and dashboardPage - on these page I have directive when I refresh page (dashboardPage) everything is working, but when I switch on homePage and I will back to dahsboardPage my problem starts occurs.
Step reproduce:
dashboardPage - reload - add new link - list-link directive is refresh new link is on list
go to homePage
back to dashboard page
try to add new link - when link is added (on server and I receives response) I call factory to store a data:
dataFactory.editData("userLinksList", result.data);
//part of factory to edit and propagation data
editData: function(name, data){
dataArray[name] = data;
$rootScope.$broadcast(name);
},
Then in directive controller I have condition to listen propagation "userLinksList" checkRootScope this is flag for only one register listener
Problem is in line:
$scope.data.links = dataFactory.getData("userLinksList");
In $scope.data.links I receives new data but I don't know why ng-repeat is not refresh
when I go to homePage and back to dashboard new link will be on list
if(checkRootScope){
$rootScope.$on("userLinksList", function () {
$scope.data.links = dataFactory.getData("userLinksList");
});
checkRootScope = false;
}
homePage - on the page I have list-link directive:
<div class="columns marketing-grid">
<div class="col-md-6">
<list-link hp="true"></list-link>
</div>
</div>
dashboardPage - on the page I have this same directive without parameter:
<div class="row">
<div class="col-sm-12 col-md-8">
<list-link></list-link>
</div>
</div>
template of list-link:
<ul ng-if="data.links">
<li ng-repeat="link in data.links | filter: search" class="link-list-item" data-id="{{link.id}}">
<div class="row">
<div class="col-md-9">
<a ng-href="link.url"><h3>{{link.title}} <span>{{link.host}}</span></h3></a>
</div>
<div class="col-md-3 link-list-time text-right">
{{link.date | date : 'd/MM/yyyy' }}
</div>
<div class="col-md-12">
<blockquote ng-show="link.comment">{{link.comment}}</blockquote>
</div>
<div class="col-md-2">
<span class="link-list-counter all" title="Number of links">{{link.counterAll}}</span>
</div>
<div class="col-md-6 link-list-tags">
<span>tags:</span>
<ul ng-if="link.tags">
<li ng-repeat="item in link.tags">#{{item}}</li>
</ul>
</div>
<div class="col-md-4 text-right link-list-buttons">
<button class="btn btn-default btn-xs" title="Edit" ng-click="edit(link.id);">Edit <span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>
<button class="btn btn-default btn-xs" title="Delete" ng-click="delete(link.id);">Delete <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
</div>
</div>
</li>
</ul>
Directive list-link:
app.directive("listLink", ['path', function(path){
var path = path.url(),
checkRootScope = true;
return {
restrict : "E",
scope : {
hp : "="
},
templateUrl: path.template.listlink,
replace : true,
transclude : false,
controller : ['$rootScope', '$scope','conn', 'auth', 'loaderService','stringOperation','dataFactory', function($rootScope, $scope, conn, auth, loaderService, stringOperation,dataFactory){
var dataConenction = function(){
conn.getData(path.server.link, { params : $scope.data })
.then(function(result){
if($scope.data.all == true){
dataFactory.addData("popularLinksList",result.data);
$scope.data.links = dataFactory.getData("popularLinksList");
} else{
dataFactory.addData("userLinksList",result.data);
$scope.data.links = dataFactory.getData("userLinksList");
}
}, function(msg){
console.log(msg);
});
};
$scope.hp = (typeof $scope.hp === "undefined" ? false : $scope.hp);
$scope.path = path;
$scope.userInfo = auth.getUserInfo();
$scope.data = {
auth : $scope.userInfo,
check : false,
all : $scope.hp
};
dataConenction();
if(checkRootScope){
$rootScope.$on("userLinksList", function () {
$scope.data.links = dataFactory.getData("userLinksList");
});
checkRootScope = false;
}
$scope.edit = function(id){
$rootScope.$broadcast("editLink", {"id": id});
};
$scope.delete = function(id){
var check = confirm("Are you sure you want to remove?");
if (check == true) {
conn.deleteData(path.server.link, {"params" : {auth : $scope.userInfo, id : id}})
.then(function(result){
dataFactory.editData("userLinksList",result.data.links);
$scope.data.links = dataFactory.getData("userLinksList");
dataFactory.editData("userTagsList",result.data.tags);
}, function(msg){
console.log(msg);
});
}
};
}]
}
}]);
Not sure if you already fixed it but I had a crack at it.
First the "why not working" part -
Page1 creates a new scope, lets say scope1.
Page2 creates a new scope, say scope2.
When the Page1 is clicked the data.link is set to 5 items and below code is run [scope1.data.link = 5 items] -
if(checkRootScope){
$rootScope.$on("userLinksList", function () {
$scope.data.links = dataFactory.getData("userLinksList");
});
checkRootScope = false;
}
When the Page2 is clicked, it set 7 items to dataFactory and it is broadcasted to and $rootScope.on is executed to update scope2.data.links to 7 items. However scope2.data.links is still set to 5 items. This is because when $rootScope.on is executed first time the "$scope" variable within the "on" function refers to closure scope i.e scope1 and NOT scope2. So essentially when scope.data.links is set to 7 then scope.data.links is set to 7 and scope2.data.links is still set to 5.
Basically ng-view creates a new scope and if directive is part of each of the views, you would always end up having different data.link value in each of the views.
Solution:
You can fix it in two ways:
Option 1: You would be better off setting the value in scope as soon the promise is resolved instead of setting in factory and getting from it in $on listener. Atleast in this case.
http://plnkr.co/edit/IdrsO1OT9zDqdRiaSBho?p=preview
Option 2: If broadcast is really essentially I think you would have to bind the data.link to rootscope (which might not be a good practice).
http://plnkr.co/edit/VptbSKRf7crU3qqNyF3i?p=preview
and may be there are other options...
I started working with angular about 2 days ago. I'm still wrapping my head around how to do many things. Right now, I am trying to have a tooltip appear with the information pertaining the clicked "tag". I defined a "tag" as a <span> element with a ng-toolkitlike so:
<div id="list-of-words" ng-controller="inlineEditorController" ng-click="hideTooltip()">
<!-- This is the tooltip. It is shown only when the showtooltip variable is truthful -->
<div id="tooltip" class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">
<input type="text" ng-model="value" />
</div>
<div ng-repeat="w in words">
<span class="tag" ng-click="toggleTooltip($event)">{{w.content}}</span>
</div>
</div>
my controller is as such:
var app = angular.module('myApp', []);
app.controller('inlineEditorController', ['$scope', function($scope){
$scope.inlineEditor = function(){
$scope.showtooltip = false;
$scope.value = 'Edit me.';
$scope.hideTooltip = function(){
$scope.showtooltip = false;
}
$scope.toggleTooltip = function(e){
e.stopPropagation();
$scope.showtooltip = !$scope.showtooltip;
}
};
})]);
what I'm attempting to do is to change the 'Edit me.' to display the content from {{w.content}} but I have no idea how to do this. Everything I've tried so far has failed.
To get item content you can use:
<span class="tag" ng-click="toggleTooltip($event,w.content)">{{w.content}}</span>
So, controller should be:
$scope.toggleTooltip = function(e,content){
e.stopPropagation();
$scope.showtooltip = !$scope.showtooltip;
$scope.value = content;
}
You can use $event.currentTarget to get the element. i.e. e.currentTarget in your controller.
I have an Angular app, the problem is, that when the {{controllername.name}} disappears for displaying the username, after session timeout, even though the warning for ngIdle comes up, the user can still refresh the screen and it keeps you on the page not taking you BACK to the login page.
The {{ctrlDash.userinfo.name}} disappears after 20 min. (See Below)
<ul class='nav'>
<li class='dropdown dark user-menu'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
<img width="23" height="23" alt="" src="assets/images/avatar.jpg" />
<span class='user-name'>{{ctrlDash.userInfo.name}}</span>
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
<a href='user_profile.html'>
<i class='icon-user'></i>
Profile
</a>
</li>
<li>
<a href='user_profile.html'>
<i class='icon-cog'></i>
Settings
</a>
</li>
<li class='divider'></li>
<li>
<a href='sign_in.html' target="_self">
<i class='icon-signout'></i>
Sign out
</a>
</li>
</ul>
</li>
</ul>
So, now, I want this feature in an template to "DETECT" when that happens and force the user to login again;
This is the ng-template on the same page at the bottom:
<!-- Templates for Modals -->
<script type="text/ng-template" id="warning-dialog.html">
<div class="modal-header">
<h3>You're Idle. Do Something!</h3>
</div>
<div class="modal-body" idle-countdown="countdown" ng-init="countdown=5">
<p>You'll be logged out in <span class="label label-warning">{{countdown}}</span> <span ng-pluralize="" count="countdown" when="{'one': 'second', 'other': 'seconds' }"></span>.</p>
<progressbar max="20" value="countdown" animate="true" class="progress-striped active" type="warning"></progressbar>
</div>
<div class="modal-footer">
Quick! Move your mouse and your session will reset...
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>Oh, Snap! You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Click the button below to be redirected to the login page and begin again.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-small" data-ng-click="goBack()">Back To Login</button>
</div>
</script>
<!-- End Templates for Modals -->
First the TIMER detects IDLE and then the WARNING pops up and tells the user, OOPS, you need to login. But, when I hit refresh, it refreshes the page, but the {{ctrlDash.userInfo.name}} is now empty.
This is the code for ngIdle
//This is the IDLE function
$scope.started = false;
$scope.ended = false;
$scope.events = [];
$scope.idle = 20; //this is in ACTUAL seconds
$scope.timeout = 20; //this is in ACTUAL seconds
function closeModals() {
if ($scope.warning) {
$scope.warning.close();
$scope.warning = null;
}
if ($scope.timedout) {
$scope.timedout.close();
$scope.timedout = null;
}
}
$scope.$on('IdleStart', function () {
closeModals();
$scope.warning = $modal.open({
templateUrl: 'warning-dialog.html',
windowClass: 'modal-danger'
});
});
$scope.$on('IdleEnd', function () {
closeModals();
});
$scope.$on('IdleTimeout', function () {
closeModals();
$scope.timedout = $modal.open({
templateUrl: 'timedout-dialog.html',
windowClass: 'modal-danger'
});
});
$scope.start = function () {
closeModals();
Idle.watch();
$scope.started = true;
};
$scope.stop = function () {
closeModals();
Idle.unwatch();
$scope.started = false;
};
if(!angular.isDefined($scope.goBack)) {
console.log("I\'m not defined...");
if(!angular.isFunction($scope.goBack)) {
console.log("I\'m not a function...")
}
}
$scope.goBack = function _goBack() {
closeModals();
Idle.unwatch();
$window.location.href = $scope.templateViews.logout;
};
Finally: The goBack() function, within the controller = dashboardController, throws an error
Unreferenced error, goBack is NOT DEFINED.
Those are my issues. Would love to assistance, please. Thanks everyone.
I'm developing my first angular app, so not a master by any means.. I implemented a logout functionality. When the user attempts to go to any page after logging out, the controller checks for the presence of credentials, if none present, they get sent back to the login page with:
`$location.path('/login');`
--Updated from comment
I have 2 service modules (with factories). 1 - communicates with REST endpoints, 2 - deals with all my business stuff. When a user logs in, on success, I pass along the user's info to the setCreds function.
var businessService = angular.module('businessService, ['ngCookies' ]);
businessService.factory('setCreds', ['$cookies', function ($cookies) {
return function(un, pw, userRole) {
var token = un.concat(":", pw);
$cookies.creds = token;
$cookies.usersRole = userRole;
Then, the first thing I check on all my controllers, before getting any info needed for a view, is checkCreds.
if (!checkCreds()) {
$location.path('/login');
} else { ..proceed with getting stuff
My checkCreds looks like:
businessService.factory('checkCreds', ['$cookies', function ($cookies) {
return function () {
var returnVal = false;
var creds = $cookies.creds;
if (creds !== undefined && creds !== "") {
returnVal = true;
}
return returnVal;
};}]);
Be sure to inject your businessService into your app, and the service factory you want to use into your controller.
I am doing a functionality of selecting an image from the image list. I have a button "select" from every button and call selectImage method on button-click.
AngularApp:
app = angular.module("BlogImageApp", []);
app.controller("BlogImageController", function($http, $scope){
$scope.selectedImageId = null;
$scope.selectedImageUrl = "";
$scope.selectImage = function(image_id) {
$scope.selectedImageId = image_id;
var params = 'id='+image_id;
$http.get('/blog/image/get-url-by-id?'+params).success(function(data){
$scope.selectedImageUrl = data;
});
}
});
// registers the BlogImageApp in the view
angular.bootstrap(document, ['BlogImageApp']);
The view:
<div id="blog-images" ng-controller="BlogImageController">
<div ng-show="selectedImageId == null" style="height:50px; margin-bottom:5px;">
<div class="alert alert-info">
<span class="glyphicon glyphicon-info-sign"></span>
The image isn't selected!
</div>
</div>
<div class="blog-selected-image" ng-hide="selectedImageUrl == ''">
<b>The selected image: <span ng-bind="selectedImageUrl"></span> </b><br/>
<img ng-src="{{selectedImageUrl}}" class="img-thumbnail" style="height:200px">
</div>
...
PJAX PART GOES HERE WITH GRID AND PAGINATION
and button with ng-click="selectImage(39)" for every item
PJAX PART ENDS
And after all in javascript:
var ngRefresh = function() {
var scope = angular.element(document.body).scope();
var compile = angular.element(document.body).injector().get('$compile');
compile($(document.body).contents())(scope);
scope.$apply();
}
// PJAX
$(document.body).on('pjax:success', function(e){
ngRefresh();
});
After pjax call I have some strange behaviour. When I click a select button, selectImage method is invoked. It changes selectedIMageUrl and I can see different url in span every time I click select button. But the image (where ng-src specified) doesn't change.
Image changing worked great before pjax call though.
PS: I understand, that it would be better to do jsFiddle snippet, but I would have problem with server side.