<a ng-attr-href="{{page==1 && 'javascript:void(0)' || '#a/'+tid+'/'+(page-1)}}">Prev</a>
I want to get that when page = 1
Prev
But the result:
Prev
use ng-click on a and pass $event to your function.
Click
In your function do the following
$scope.yourFunction = function(e) {
e.preventDefault();
};
new angular you have to white list javascript
angular.module("app", [])
.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|javascript):/);
}]);
or
Click
$scope.foo = function(e) {
e.preventDefault();
};
or
<a ng-click="foo($event);">Click</a>
Use ng-click in <a>
<a href="" ng-click="go(tid)">
And in controller
app.controller('whatever', function($scope, $location){
$scope.go = function(id){
if($scope.page == 1) {
return;
}
var url = '/a/' + id + '/' + ($scope.page - 1);
$location.url(url);
}
});
This way you also move logic out of template.
don't use href="javascript:void(0);"; try href="" or href="#" instead.
Related
I am trying to do that if I click on this:
<div class="dec qtybutton" data-id="{{ $item->id }}"><i class="zmdi zmdi-chevron-down"></i></div>
It displays an alert to know that it really works, my jQuery code is this one:
$('.dec').on('click', function () {
var id = $(this).attr('data-id');
alert(id);
});
The thing is that I have tried all this and it has not worked:
$('.dec').on('click', function () {
var id = $(this).attr('data-id');
alert(id);
});
$('.dec > i').on('click', function () {
var id = $(this).attr('data-id');
alert(id);
});
I do not know how to do that this jquery reads the .dec i or the .dec then if I push it does not do anything, it does not display the alert.. so I wonder what is the problem? because it has not worked at all.
Thanks!
Try this , In jquery you can directly access data attribute.
$(".dec").click(function(){
let id = $(this).data('id');
alert(id)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dec qtybutton" data-id="2">click<i class="zmdi zmdi-chevron-down"></i></div>
I am generating dynamic html element from angularjs controller.I have used $compile
to make ng-click work inside html element.But still it is not calling the function.
Here is my js
var accountApp = angular.module('accountApp', ['ngRoute']);
accountApp.config(['$compileProvider',function($compileProvider )
.controller('myController',function($scope,$compile)
{
var searchHTML = '<li><a href="javascript:void(0)" data-ng-
click="setMarkerToCenterA()">'+item.title+'</a></li>';
$compile(searchHTML)($scope);
$scope.setMarkerToCenterA = function() {
alert("this alert is not calling");
}
});
}]);
I have injected the dependencies also.Can anyone tell why ng-click is not calling function even though i am using $compile?
First you need an element where this li element will be located.
<div ng-controller="myController">
<ul id="list"></ul>
</div>
Then in your controller:
var element = angular.element("#list");
element.html($compile(html)($scope));
$scope.setMarkerToCenterA = function() {
alert("Here");
};
Probably you missed to parse the HTML string using angular.element(htmlString) which is then compiled.
var app = angular.module('stackoverflow', []);
app.controller('MainCtrl', function($scope, $compile, $sce) {
var searchHTML = 'hello';
var template = angular.element(searchHTML);
$compile(template)($scope);
angular.element(document.querySelector('#container')).append(template);
$scope.setMarkerToCenterA = function() {
alert("this alert is now calling");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="stackoverflow" ng-controller="MainCtrl">
<div id="container"></div>
</div>
How to disable ng-click event in confirmation Popup Button
1[Screen-Shot]
You can create a direcftive like this one :
app.directive('ngConfirmClick', [
function(){
return {
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$apply(clickAction);
}
});
}
};
}]);
You use it this way :
<button confirmed-click="YourFunction()" ng-confirm-click="Are you really sure you want to do this ?">Action</button>
I have a follow button for a particular user that should change its text to followed after it's clicked and vice versa. This follow button can show up in different modules on the page. When it's clicked, the follow button for this particular users should update in all of these modules. However, the buttons are in different scopes. What is the angular way of making sure the cloned buttons are in the same state?
My current solution is to use an universal jQuery selector to update all the buttons on click.
You should store the state in a service.
example:
app.factory('SharedService', function() {
this.buttonState = null;
this.setButtonState= function(value) {
this.buttonState = value;
}
this.getButtonState= function() {
return this.buttonState ;
}
return this;
});
Read: AngularJS Docs on services
or check this Egghead.io video
You can use $rootScope.$broadcast to do this. when any of button gets clicked you fire an event using $rootScope.$broadcast and then listen to it using $scope.$on and toggle the status of buttons. and you can also update state inside the service too, so you can fetch current value later if needed.
See the below example:
var app = angular.module('app', []);
app.controller('ctrl1', function($scope) {
$scope.label1 = "First Button";
});
app.controller('ctrl2', function($scope) {
$scope.label2 = "Second Button";
});
app.controller('ctrl3', function($scope) {
$scope.label3 = "Third Button";
});
// updating state in service too.
app.service('fButtons', function($rootScope) {
var buttonState = false;
this.getCurrentState = function() {
return buttonState;
};
this.updateCurrentState = function() {
buttonState = !buttonState;
};
});
app.directive('followButton', function($rootScope, $timeout, fButtons) {
return {
restrict: 'E',
scope: {
label: '='
},
template: '<button ng-click="buttonClick()" ng-class="{red: active}">{{label}}</button>',
controller: function($scope) {
$scope.$on('button.toggled', function() {
$scope.active = !$scope.active;
});
$scope.buttonClick = function() {
fButtons.updateCurrentState();
$rootScope.$broadcast('button.toggled');
console.log(fButtons.getCurrentState());
}
}
};
});
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl1">
<follow-button label="label1"></follow-button>
</div>
<hr/>
<div ng-controller="ctrl2">
<follow-button label="label2"></follow-button>
</div>
<hr/>
<div ng-controller="ctrl3">
<follow-button label="label3"></follow-button>
</div>
</div>
see console for service state.
$broadcast docs
I have some tabs with jquery ui. Each link should receive a json response, but I am unable to make it work.
This is the active one:
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="ui-tabs-1" aria-labelledby="ui-id-1" aria-selected="true">
comments
</li>
response is:
[{"created_at":"2013-07-12T22:51:46Z","id":8,"programa_id":88,"sent_at":"2013-07-12T22:51:46Z","texto":"testing","updated_at":"2013-07-12T22:51:46Z","user_id":null}]
I tried several things, but best approach is:
$( "#tab_messages" ).tabs({
heightStyle: "fill",
beforeLoad: function( event, ui ) {
ui.ajaxSettings.dataType = "json";
ui.ajaxSettings.dataFilter = function(data) {
var jsonData = $.parseJSON(data);
alert(jsonData[0].texto);
return jsonData[1].texto;
};
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}});
});
Panel don't load (jqXHR.error appears), but if I return jsonData[1].texto, it works.
I don't know if it is the best solution, but if I delete ui.jqXHR.error function and set panel's html from dataFilter, it seems to work:
ui.ajaxSettings.dataFilter = function(data) {
var jsonData = $.parseJSON(data);
var htmlpanel = "";
$.each(jsonData, function(index, value){
htmlpanel += "<li>" + value.texto + "</li>";
});
ui.panel.html(htmlpanel);
};