I am trying to pass an angular variable into a function click call.
this is what im trying to do so far:
<button onclick="dialogBox(id)">Cancel</button>
$scope.dialogBox = function (id) {
console.log('Succesfully submitted id: '+id);
});
onclick is a normal JavaScript event binder instead of an Angular one. You need to use global variables/functions in the onclick expression. However, in your code, dialogBox() is a function of $scope. So, if your button tag is wrapped inside the corresponding controller, just use ng-click instead. Like:
<button ng-click="dialogBox(id)">Cancel</button>
ng-click is the to slove this problem
<button ng-click="dialogBox(id)">Cancel</button>
Related
I have created a directive which wraps a jQuery element, this directive is binded to an object which contains some callback functions as following:
vm.treeEvents = {
check_node: function(node, selected){
vm.form.$setDirty();
...
},
uncheck_node: function(node, selected){
vm.form.$setDirty();
...
}
};
In the directive post link function I have this :
if (scope.tree.treeEvents.hasOwnProperty(evt)) {
scope.tree.treeView.on(evt.indexOf('.') > 0 ? evt : evt + '.jstree', scope.tree.treeEvents[evt]);
}
so whenever an event declared in the treeEvents scope binding is triggered, the callback function is executed, and then the form is set to dirty state.
When I did this I noticed that the form is not passed to the dirty state unless I scroll the page or I click on some element in the form.
How can I solve this?
This is a common AngularJS issue, because of the fact that you jQuery trigger is "outside of Angular's world" you should let Angular to know about it via calling to $scope.$apply inside the event handler.
More info, read $scope.$apply docs.
I fixed this by using scope.$evalAsync();
I have a button in which i want to use as a link as well as want to use ng-click to close the dialog..I mean when i click cancel button the page must be loaded to home page and ng-dialog must be closed.Can anyone help me to solve this problem.The below method does not working .
<button class="btn btn-default" onclick="window.location='#/cancel'" ng-click="cancelbtn()">Cancel</a></button>
.when("/cancel",
{
templateUrl:"Htmlfiles/Home.html",
});
You need to create a scope function which is being called on button click event.
$scope.cancelbtn = function()
{
dialog.close(id)
$window.location.href= "#cancel";
}
Inside you scope function your can change ng-view with below code.
$window.location.href= "#cancel";
Don't forget to add $window dependency.
The first problem you have is that onclick and ng-click bind to the same event.
I'd recommend that you remove onclick in code and handle that in your controller, inside cancelbtn() function. How to do a redirect take a look at $location service here.
You can also send url as a parameter, e.g. ng-click="cancelBtn('#/cancel')"
i want to perform 2 action on button click
1) is perform save operation and on that success
2)goto paypal
<form role="form" id="checkoutform" name="checkoutform" novalidate="novalidate" ng-submit="saveClick()" action="https://www.sandbox.paypal.com/cgi-bin/webscr">
...
...
..
<button type="submit" id="purchase" class="btn btn-primary">Purchase</button>
</form>
using angular js.
You answered your own question for #1 I believe.
1) is perform save operation and on that success
The ng-click="saveClick()" directive will fire the saveClick() function in your controller.
There you can perform your save operation.
If you don't have your app or controller setup visit AngularJS docs here. Angular Getting Started
2)goto paypal
For this, checkout out angular injected service $location. You can do something like $location.path("https://www.paypal.com")
Here is a link
If you need to hit the link from your controller rather than send the user to the page you'll want to use angulars $http injected service.
Here
when you have 2 form in 1 html file then if you want to call another form (2nd) on click of first form button then ...
this is the best solution using angularjs
i created on function in .js file
$scope.load = function () {
document.getElementById("paypalform").submit();
}
and call it in another function like save()
my first form have 1 button and its call save after that on success of save function i call this one...
$timeout(function () { $scope.load(); }, 1000, true);
this function calls another form(2nd) which name like paypalform.
and its working..
In AngularJS you can make a button to call an action like this:
<div ng-controller="myController">
<button ng-click="onButtonClicked()">Click me</button>
</div>
So, I'm inserting a custom directive like this:
and in my-canvas.js directive file's link function I replace the tag with a KineticJS canvas. Then, User manipulate the canvas by dragging around Kinetic shapes and, finally, when User does with the shapes what he's required to do, I want the directive to call an action defined on myController. I'm thinking about something like this:
<div ng-controller="myController">
<my-canvas ng-success="onScenarioSuccess" />
</div>
but I can't figure out how the correct way to do it.
How can I make a directive to call it's action/event programmatically?
When you want your directive to expose an API for binding to behaviors you should use an isolate scope and use the & local scope property. This allows you to pass in a function that the directive can invoke. Here is a simple example:
.directive('testDirective', function () {
return {
restrict: 'E',
scope: {
action: '&'
},
template: '<button ng-click="action()">Test</button>'
};
});
And use it like:
<test-directive action="myControllerFunction()"></test-directive>
As per the documentation:
The & binding allows a directive to trigger evaluation of an
expression in the context of the original scope, at a specific time.
Any legal expression is allowed, including an expression which
contains a function call. Because of this, & bindings are ideal for
binding callback functions to directive behaviors.
There'are some more detail in the documentation.
If you want to expose a custom event like ng-success and want to call a function on the event.
You can either do what #Beyers has mentioned using isolated scope.
Or else look at the source code of ng-click, it just wraps the javascript event inside $scope.apply, using the $parse service to evaluate the expression passed to it. Something like this can be added in your link function
var fn = $parse(attr['ngSuccess']);
element.on('someEvent', function (event) {
var callback = function () {
fn(scope, {
$event: event
});
};
scope.$apply(callback);
});
The advantage of this mechanism is that isolated scope is not created.
I'm using a jQuery plugin to 'customize' my selects.
This plugin fires the change event of the original select when some option is selected.
The problem is that my scope doesn't change.
Here you can see a quick example... changing the select the scope changes. clicking the buttons the select changes but not the scope.
http://plnkr.co/edit/pYzqeL6jrQdTNkqwF1HG?p=preview
What am I missing?
You need to access the scope of the dropdown and then apply it as shown below:
$('button').on('click', function(){
var newVal = $(this).data('val');
$('select').val(newVal).change();
var scope = angular.element($("select")).scope();
scope.$apply(function(){
scope.selectValue = newVal;
});
});
When you click the button, angular goes out of its scope and uses jquery to manipulate the data/to perform some action, so we need to exlicitly call $scope.$apply() to reflect the changes back into the scope of the controller. And change your controller to this:
app.controller('AppCtrl', function($scope) {
$('button').on('click', function(){
$scope.selectValue=$(this).data('val');
$scope.$apply();
});
}
By the way you can use jquery event inside the angular..
Ideally in angularJS, controller should not update DOM reference directly. If you want to achieve same thing, you should expose one method over $scope and use "ng-click" directive.
If you want to achieve same using jQuery, it should go into directive as
$scope.$apply()
to update the scope.
In your jQuery put auto trigger e.g
$('#input').click(function(){
$('#input').val('1');
$('#input').trigger('input'); //add this line this will bind $scope Variable
});
It's best not to mix DOM manipulation with Angular. Try the following for your button HTML:
<button class="setVal" ng-click="selectValue=1">Set 1</button>
<button class="setVal" ng-click="selectValue=2">Set 2</button>
<button class="setVal" ng-click="selectValue=3">Set 3</button>
I tried the above in your Plunker and it worked.