I'm building a website where I need to display Facebook like/ share buttons and a twitter share button on several elements in a list. Basically I have a list of events that are loaded asynchronously using an an angular controller and ng-repeat.
The problem I am encountering is that twitter and Facebook buttons require a js widget now and some js code needs to be executed to make the buttons display. This would be fine if the events were rendered server side, but they are instead done so using angular, and I need to have that js code executed after the events are rendered.
Essentially, my question is: how could I run some code each time after an ng-repeat is rendered in angular?
Thanks guys
Solved this using directives, basically just added this to my javascript:
myApp.directive('afterEventsLoadedDirective', function() {
return function(scope, element, attrs) {
if (scope.$last){
// handle events here
}
};
});
Related
I've AngularJS and ReactJS both running on same page.
But when I click on any ReactJS <a> tag, Angular's $rootElement.on('click) getting triggered and page redirects.
I want to do few functionalities in ReactJS before page redirection.
I don't want to do changes in ReactJS, can anyone please suggest how I can handle this situation in Angular?
From your question what you can do is, not to add href attribute in <a> tag. Rather pass the routing location to a function:
<a ng-click="redirect(your_routing_path)">Somethink</a>
and in controller:
$scope.redirect = function(your_routing_path){
// do what React gotta do and then redirect
$location.path(your_routing_path);
}
I've found a solution. In angular run we can simply write the below code block:
/**
* We do not need to handle on-click handler if element belongs to reactJS.
*/
$rootElement.off('click', '[data-reactid]');
So it won't handle any on-click scenario.
I have buttons that i bind to an event click in jquery :
$('myselection').click(myfunction);
Should they be in the controller ?
I was thinking so but i encountered a situation that made me doubt. In my js view, i create a form and its submit button. I need to attach an event listener to it such as :
$('mybutton').click(myfunctiontosubmit);
I can't figure a way to let the controller manage this listener because the button does not exists when i first call my view.
Usually not. Their place is in the views, however they could call methods in controllers.
Ember.js has the following description for it's Views.
Ember.View is the class in Ember responsible for encapsulating templates of HTML content, combining templates with data to render as sections of a page's DOM, and registering and responding to user-initiated events.
As well as having a simplified API to use said events in the view.
I am new to AngularJs and working on a website.
I am retrieving the data from Rest services in a page,I am able to display the data using ng-repeat. But the problem is I have a normal javascript functioning element in the page. It is not working when i include the angularjs(ng-repeat). Suggest me to work on it.
Well nowhere up above do we see anything about ng-repeat, however I can tell you its probably got to do with the fact that you're binding your click event on dom ready, and then angular is changing your elements which nullifies the click listener. If you're using ng-repeat, you should be using ng-click as the handler for those events within your controller. Angular takes care of binding the handler specified using ng-click at the proper time when the element exists in the dom. jQuery really has no place in this if you are trying to use angular.
I want to disable all the functionalities provided by Angularjs, but only after the pages and all components have been loaded fully.For example "ng-click" should not work any more.
I tried to set the "ng-click" attr to null but, it still works when clicked.
Thank you
You can destroy angular app $scope that means it will disable only two way binding of scope variables using $scope.$destroy() method nothing more than that(If you want to disable two way binding on start up load then you need call $destroy() in $timeout).
But the event listener won't get disabled from angular app which are register while angular app is initialized on page. You can only achieve this by maintaining any flag (this is hacky way).
Here is Fiddle which demonstrate what i want to say.
Thanks.
tldr;
I need to fire a custom directive/jQuery plugin on ng-click and pass a parameter to it then reload that page so the parameter's value takes place. So on reload instead of there being 3 results in my Google Map, there should be 50 results showing.
Disclaimer
I've done a ton of reading on firing directive on ng-click as well as passing parameters to directive (particularly this question and this question and this question) but I am fairly new to AngularJS so I'm still a bit naive to all the greatness of Angular and how to utilize it properly...
Background
I created a jQuery plugin for a Google Maps API app I'm creating. The app is using AngularJS also. The plugin creates a map and shows 3 locations to the user plugin code here. Under the map I have the list of 3 locations in a table. I also have a button that says more results which should return 50 more locations.
Question
What is the best way to...
Pass a new parameter to my plugin/directive? Currently on page load I load the directive and fire the plugin by <div tfinder-map="{queryLimit: 3}">. Ideally I'd like to be passing 50 when I click the more results button.
Along with passing the param to my directive/plugin on click of more results, I would like it to essentially fire the directive and reload the page so the 50 results show up, instead of just 3.
After reading other questions, I think passing a param to my directive would go something like this (although I'm sure the syntax is wrong):
ng-click="tfinder-map(queryLimit: 50)"
And to be able to persist that value as the page reloads, the only way I could think to do that would be via a query string argument in the URL.
I also did a little reading about $route.reload() which sounds interesting, I just don't know the best way to implement this to do a reload with params.
The code
My current directive looks like this:
directive('tfinderMap', function() {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
$(elm).tfindermap(scope.$eval(attrs.tfinderMap));
}
};
})
And in jQuery it'd be
$('#foo').tfindermap({queryLimit: 3})
The actual jQuery plugin can be viewed here on Github
Also, here's the UI if it helps visualize it
clicking the more results button should make 50 results appear as opposed to 3