How to disable Angularjs completely after the page is fully loaded - javascript

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.

Related

How to refresh the particular div in angular application

In my project, I need to change the content of a particular div. How can reload the content of the div when a button is clicked?
I am using the angularjs, node, and HTML in my project. The window.reload option reloads the whole application; I don't want the page reloaded, just the particular div on one page.
You can try with $scope.$apply(), or $scope.$digest(), but if you have a need to do this, chances are, you're doing something wrong. Maybe you could provide us with your code?
Bear in mind that if you haven't changed anything inside the model of that particular element or directive, no changes will occur. $apply() will simply tell Angular that you've made some changes to the model from the outside, that Angular is not aware of, and that it should fire it's watchers and see if anything needs to be re-rendered.
Let us know if it worked.
Hey i got answer it's working for me
$route.reload(putyourJsonObject);
Here $route.reload is used to reload my data.

Javascript is not working when ng-repeat is used

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.

How to trigger Angular to recompile a template from JQuery?

I understand that the solution will be non-ideal -- I'm working with legacy code and have many constraints.
On a page in my app, the user choose between one of several forms they want to fill out. When selected, we use JQuery to load the selected form into the DOM. In this newly loaded form, we need to use an angular directive, but angular doesn't know that anything has changed (since JQuery handled the state change), so it doesn't recompile the markup that contains our directive.
How can I let angular know that it needs to make another pass through the DOM?
$scope.apply() will trigger a new check of the DOM.
If you use it with no check, it may fire an error inside angular.
You can use it, wrapped into a $timeout(), so that it will be triggered after a current digest (if there was)
$timeout(function(){
$scope.$apply();
});

AngularJS : directives newbie

I'm starting my great adventure with angular and wanted to ask a question regarding directives usage, as I am not 100% sure after seeing multiple tutorials.
I want to make a simple app giving you directions:
1) click a button, fire in the controller a function to get current position from navigator geolocation (i think no service is necessary for this, and this can stay in the controller?)
2) after getting the coordinates I have some information about the place, which should be shown to the user, and here is the question: Should there be a directive with template for binding these information from the scope and showing in the dom, or is it enough to use simply "ng-hide" (which is in fact a directive - sic!:)) on a div, fetch the information on a place with a service, bind it with the hidden div, and set "ng-hide" to false to display the dom containing place information.
The "ng-hide" variant seems easy, but is it the proper "angular way" or just bad practice of beginners?
Thank You for your time and help in advance:)
IMHO
You can put it in a service if you want to use that method from different controllers or for clean-code purpose.
I use directives when I want a specific behaviour or a group of controls that repeat along the application. If you are using basic html controls and you just need to display/hide I would use ng-hide.

Routing within a Bootstrap Modal Window

I'm new to angular and i'm using bootstrap for modal window. I have certain queries on how to implement it properly.
1) Should a Modal Window be a route?
In the example the window is triggered by a javascript rather than a route on an anchor
<button class="btn" ng-click="open()">Open me!</button>
http://plnkr.co/edit/IDOoeYQticjRZA4uMGJx?p=preview
Is the above approach correct or should there be a route to trigger? If yes then how can I do it, example would be much appreciated.
2) If javascript is used to trigger the window how can I do routing inside the modal window?
PS : I did watch http://egghead.io/lessons/angularjs-introduction-ui-router video on the ui-router for understanding but not sure how it can be implemented when javascript is used.
I did try triggering the modal from a link but it does not open up the second time.
http://plnkr.co/edit/b2Hy7VIjgBwI8HpI90KN?p=preview
Example would be really helpful.
I use Foundation's reveal with AngularJS, which is similar to Bootstap's modal. The modal itself isn't a separate route, as like you, I trigger it via Javascript from the controller. I think this is fine though, as it's usually related to the scope of that controller, e.g. creating / editing records for the list, etc.
The content of the modal/reveal is a separate template though, so is only loaded and cached as needed, and the modal has its own controller. My 'parent' controller can inject values into the reveal controller via the provider I use, which is presumably similar to how the Bootstrap modal provider works.
So, in my opinion I think it's perfectly valid for the modal to not have its own route, but perhaps someone out there has implemented things differently.
Update: I also think that routing (with the ng-view directive) is more about single page applications. As the ng-view element is constant, I don't quite see how that would work with modals, as you'd presumably lose the context of the view from which it is loaded.

Categories