Angular ng-click get params from jquery trigger event - javascript

With jQuery I can pass params to trigger event and get them from a function. Like this:
$('div').trigger('click', [1])
$('.classname').live('click', function (event, param) {
alert(param);
})​;
Can I catch the same param using ng-click?

simple answer
yes you can like this
<button ng-click="yourtask(task.id)">remove</button>
where task is the scope and id is part of that scope.

Yes, but doesn't look like this.
In angular you must configure the ngClick directive with a function of your $scope that can receive paramenters like so:
Controller
function myController($scope){
$scope.myClickHandler = function(param){
console.log(param);
//code here
};
}
Html
<button ng-click="myClickHandler('foo')">Click</button>
if you need to trigger this function handler it can be invoked like a normal function.
On controllers:
$scope.myClickHandler('bar');
On views (once your view in on myController scope):
myClickHandler('bar');

Related

Calling Angularjs Function from a different javascript/Jquery Function

I have two js files, app.js and datepicker.js. I have nothing to do with the html file here. There is a javascript function called clickApply() in datepicker.js. I want to call another submitDetails() function which is inside the app.js file from the clickApply() function. How to do it?
angular.module('ctrl').controller('MyCtrl', ["$scope","$rootScope", function($scope, $rootScope){
$rootScope.submitDetails=function()
}]);//inside app.js
clickApply: function(e) { //inside datepicker.js
angular.element('#span').on("click",submitDetails());
this.hide();
this.element.trigger('apply.daterangepicker', this);
}
No one prefer executing the angular functions outside of angular scope. If you want to implement a jQuery or any other external plugin in AngularJS, wrap it in directive and use it.
Below code is used for debugging purpose only.
Change your clickApply function signature to below:
For accessing scope you can use angular.element(element).scope()
For rootScope you can use angular.element('body').scope().$root`
clickApply: function(e) { //inside datepicker.js
angular.element('#span').on("click", function(e) {
// if you want to access rootScope
var rootScope = angular.element('body').scope().$root;
rootScope.submitDetails();
// if you want to access current scope
// var scope = angular.element(e.target).scope();
// scope.submitDetails();
});
this.hide();
this.element.trigger('apply.daterangepicker', this);
}

Using this instead of $scope inside controller

I am trying to follow style guide for angular and there wrote we should use this insted scope...
Styleguide
Could someone explain me when I am able to use this?
Here is my try..... What I am doing wrong?
I am trying to toggle form....
here is my html code:
REPLY
<a href="#" ng-click="formEdit(x)" ng-if="x.formEditShow" >CLOSE</a>
With classic $scope I would do like this inside my conroller :
$scope.formEdit = function(data){
data.formEditShow = !data.formEditShow;
}
But with this it should look something like this(but don't work):
var vm = this;
vm.formEdit = formEdit;
function formEdit(data){
data.formEditShow = !data.formEditShow;
}
Anyone can help me to understand this?
When you are using this(context) in controller instead of $scope, you must use controllerAs while defining html on page to access controller variables. Whenever you wanted to use variable bounded to this on view you could use alias of your controller. Below you can see vm is alias of controller.
ng-controller="myController as vm"
Then while accessing controller method an variable inside ng-controller div you need to use alias of your controller like ng-click="vm.formEdit(x)"
HTML
REPLY
<a href="#" ng-click="vm.formEdit(x)" ng-if="x.formEditShow" >CLOSE</a>
Assuming your controller is named FormController.
First step
The first step is to declare the route (or the ng-controller value if you are not using a router) as such:
FormController as form // name it semantically instead of a generic name
Due to the above configuration, angular will alias as form the instances of FormController.
HTML template
Then adapt your html template according to the alias you gave (form). I modified your html to keep only the essential part about the question. We are calling the functions form.reply and form.close.
REPLY
CLOSE
Controller declaration
According to what we wrote above, our controller should look like that:
myApp.controller('FormController', function () {
var vm = this;
vm.reply = function () {
// ...
}
vm.close = function () {
// ...
}
}
Notice the var vm = this; line? Theoretically we could get rid of this line, and store the functions reply and close in the this object. But depending of the context, this does not refer to the same object. In a callback function this would not refer to the controller but to the callback function. That's why we are caching the this that refers to the controller. We usually name this reference vm for viewmodel, as a controller controls a view.

AngularJs call parent controller function with parameter

I have two controller's and I want to call other parent controller function with parameter when user clicks the button.
Html
<a ng-click='test('something')'>Click</a>
Controller
controller: function($scope) {
..........
$scope.test= $scope.$parent.parentTest(t);// it fails...
..........}
Parent Controller
$scope.parentTest= function(m) {
var my=m;
...Something...
}
If I run function without any parameter, it works. If I run the function with parameter it doesn't.
I want to call parent function with parameter.
The mistake in your code is with this line:
//This assigns the RESULT of parentTest() to $scope.test
$scope.test= $scope.$parent.parentTest(t);
// Either of the 2 options below will probably work for you.
//This assigns the parentTest Function itself to $scope.test
$scope.test= $scope.$parent.parentTest;
//This wraps it safely in case the parentTest function isn't ready when
// this controller initializes
$scope.test= function(t){$scope.$parent.parentTest(t)}; // << Change it to this!
Check this plunkr, maybe this can help you
plunkr
access parentfunction in child controller

Angularjs calling scope function in a directive

I'm trying to call a scope function from within a controller (which may or may not exist) from a directive. Calling fn() by itself, doesn't work because the fn() may not exist.
I've used scope.$apply('fn') which works, however I need to pass in parameters into the function, such as scope.$apply('fn(one, two)'); - this does not work.
Any suggestions how to call a function with parameters in a directive, that doesn't break if the controller has not yet defined the function?
Thanks!
Just call your function from a function like this :
scope.$apply(function(){
fn(one, two);
});

controller and link functions in directive do not have same scope

I have an issue with my angular.js directive.
It should be a kind of autocomplete, in directive's controller property I'm loading an array of values and inside link function compiling template to show the results.
But when I update scope inside link it doesn't reflect on controller and template, please take look at the example here - http://plnkr.co/edit/Lz3QGwklghPo3as2QTqU
Should I apply scope changes or smth similar?
Your code has two problems
Attach click event to document instead of body
Use $apply() inside bind
Below code will resolve your problem
$document.bind('click', function (e) {
scope.results = [];
scope.$apply();
});
I update your $body.bind('click',...) method to
$body.bind('change', function (e) {
scope.results = [];
});
and it seemed to work (I mean that after 0.5 sec I typed a letter, the list of name is re-displayed).

Categories

Resources