Suppose I am customizing an angularjs bootstrap carousel and making it as a directive. I want to customize the current function that the ng-click calls on each left/right arrow so it calls a custom function before the original function defined in the bootstrap. I know calling multiple functions in ng-click can be done by
ng-click = "customFunction();originalFunctionFromBootstrap()"
But, in angular carousel, the left and right arrow is defined inside its bootstrap template and I don't want to modify the template using $templatecache.
Is there a way to add new ng-click in my controller without having to modify the template cache?
EDIT:
The current workaround that I can have is using
document.querySelector('.left.carousel-control').addEventListener('click', function(){...})
And of course this is not angular way of doing this. Plus, if I use ng-click from ng-touch, this will not be called as well. Is there a way on how to modify the ng-click?
If you inherit the scope of the directive you can save the library function in a variable and override the function with your logic. Then call the function that you saved on a variable so everything keep working.
var _superClickMethod = scope.originalFunctionFromBootstrap;
scope.originalFunctionFromBootstrap = function () {
// custom logic
_superClickMethod();
}
Other solution is to wrap the carrusel bootstrap plugin in a directive of yours. I recommend the last option.
What I ended up doing is:
document.querySelector('.left.carousel-control').setAttribute('ng-click', 'customFunction()');
$compile(document.querySelector('.left.carousel-control'))(scope);
And this solves my problem.
Related
$scope.addNew = function(){
$('.thumb-img-gallary').append("<li><span class='img-del' ng-click='delThumbImgGallaryPhoto($event)'>X</span><img class='thumb-img' src='data:image/jpeg;base64,"+imageData+"'/></li>");
}
I am calling this function to add element dynamically. But then delThumbImgGallaryPhoto() is not getting called.
you cannot just append an element with a ng-click or any other directive, and expect it to work. it has got to be compiled by angular.
explenation about compilation from angular docs:
For AngularJS, "compilation" means attaching directives to the HTML to make it interactive
compelation happens in one of two cases:
When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements
when you call the $compile service inside an angular context
so what you need to do, is first to compile it(remeber to inject the $compile service in your controller), and then append it:
$scope.addNew = function(){
var elem = $compile("<li><span class='img-del' ng-click='delThumbImgGallaryPhoto($event)'>X</span><img class='thumb-img' src='data:image/jpeg;base64,"+imageData+"'/></li>")($scope);
$('.thumb-img-gallary').append(elem);
}
BTW, remember it is prefable not to have any DOM manipulations done in the controller. angular has directives for that.
You have to compile it with scope
try like this
var item="<li><span class='img-del' ng-click='delThumbImgGallaryPhoto($event)'>X</span><img class='thumb-img' src='data:image/jpeg;base64,"+imageData+"'/></li>"
$('.thumb-img-gallary').append(item);
$compile(item)($scope);
angular doesn't know anything about your newly added element. You need to compile your newly added element using $compile. and you should better use directive for this task.
It is a bad habit to access ui elements from controller.
edit: it would be best using ng-repeat for this task. lets say you have a thumb-gallery directive which is repeated using ng-repeat by thumbs array.
when you need to add a new image you only need to add it to your thumbs array.
it is simple and straightforward
Your html would look like
<thumb-gallery ng-repeat="gallery in galleries"></thumb-gallery>
and your js would look like
var gallery = {};
$scope.galleries.add(gallery);
I want to do something like that, Can it be possible in angularjs
ng-change=\"myDirective = [test]\"
i.e. I simply want to call my directive on ng-change , is it possible in angularjs to call custom directive inside directive.
yes it is possible but for doing this you need another directive for watching changes on your myDirective variable...
when you change value of myDirective middleware directive catches changes and rebuild dom.
I created such a directive for another problem but it can be used in your situation so I edit this PLUNKER for you...
I am using Angular JS with Onsen UI framework. In any template to "change page" I just need to put an ng-click calling the function:
ons.screen.presentPage('mypage.html')
I need to do the same into a controller (javascript code), in other words I want to change page without clicking on links.
Thanks
To call any function defined into the Screen Service I just needed to add $rootScope before ons.screen.presentPage('mypage.html').
$rootScope.ons.screen.presentPage('mypage.html')
Call the function normally, as you would do outside ng-click.
If you did load onsenui.js, it shall work seamlessly.
I'm currently using jQuery to display modal windows, the function basically builds some HTML and then does $('#myElement').append(modalHtml);
Inside that modal HTML I have <div ng-controller="MyController">...</div> however when the modal is displayed the controller doesn't seem to get initialized. Is this because it's being added to the DOM outside of angular's scope? If so is there anyway when I run that code I could notify angular to look out for changes?
The breakdown of how it is at the moment is Angular runs loadModal() through an ng-click on an element. loadModal() calls modal(), and modal() builds the html and adds it to the DOM. Modal is in a script of just standalone helper functions.
The modal controller won't be called because you're not parsing or compiling the appended DOM code with Angular. Hence, Angular will not 'notice' this change and as a result it will not run any controllers or directives in the added DOM. The best way to solve this kind of problems is by adding a custom directive.
As you're trying to make a modal work, you could also take a look at existing modal adaptations for Angular, such as the one in AngularUI.
I'm using a custom jquery plugin which transforms table to a tree. And when i'm loading data from ng model i need to recall plugin's constructor. but i can not find that event, when i need to call that.
I've tried to $watch model variable - doen't work well
You should create a new directive instead of doing this in a controller.
By using a directive, you'll be sure that the code located in its link function is applyed after DOM complilation.
It is intended to do what you want.
see http://docs.angularjs.org/guide/directive