Call javascript function out of scope on ng-click

Question

I have a javascript library with a bunch of useful features that I use on my website that does different things.

I know that I cannot access these functions from ng-click, because the functions are out of scope.

Is there a way to access them without declaring a region function that simply calls a function call in the library?

Here is an example jsfiddle. I would like to know if there is a way to make the second link work. This is simply because I don't like the idea of ​​defining a function that just calls another function. eg.

HTML:

<div ng-click="doSomething()">Click Me (Working)</div> <div ng-click="doSomethingElse()">Click Me (Not Working)</div> 

JS controller:

 $scope.doSomething = function () { doSomethingElse(); }; 

External JS Library:

 function doSomethingElse() { alert("SomethingElse"); } 

<------- UPDATE ------->

Thanks for the creative answers guys! Vinay K's answer is the simplest and most obvious, but I decided to go with Ron E.'s answer. The reason is that I already have a global module with a collection of reusable directives, and this will make it easier and easier to implement in my HTML. Also because sometimes I use more than one function from the library, and then I would have to link them in onclick:

 onlick="func1(); func2(); func3();" 

If the directive is just cleaner, and I can name as many functions as I like, doing other things.

Answer 1

You can use the directive, here is an example:

 // in your JS source angular.directive('something', [function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() { alert('yup'); }); } }; }]); // in your HTML file <button type="button" something>Click Me!</button> 

This allows you to easily use the various code snippets / functions for the entire project.

Answer 2

ng-click expression (or any other expression in angular) will be evaluated in the scope context.

Since doSomethingElse not defined in scope, it will not work.

Use onclick instead of ng-click

 <div ng-click="doSomething()">Click Me</div> <div onclick="doSomethingElse()">Click Me </div> 

Answer 3

Hey. If you defined a javascript function, you can use the old js functions and Angular js together

Example:

 <div ng-click="doSomething()" class="myBtn"=>Click Me (Working)</div> //JQuery Lib must be included your project $(document).on('click','.btn',function(){ eval($(this).attr('ng-click')); }); function doSomething(){ //Bla Blo Blu Bli } 

Thanks for reading

Answer 4

If your library is accessible globally (for example, on a window object), you can write a method in your root directory that takes a function name as a parameter. It is guaranteed that this is not the most orthodox way to do something in Angular, but it saves you from having to add all these additional methods to all your areas. Here is an example:

In your app.run method, you can add something like this:

 $rootScope.callWindowMethod = function(methodName, parameter) { if(typeof window[methodName] !== 'function') { console.log('could not find ', methodName, ' function'); return; } return window[methodName](parameter); }; 

Then, in your opinion, you can do something like this:

 <button ng-click="$root.callWindowMethod('alert','Hey there!')">Click Me</button> 

You can become even more attractive and pass an arbitrary number of parameters to your function, and also have a function name containing points for methods that are nested in other objects and separate them. That should at least start with you.