How to trigger Angular to recompile a template from JQuery? - javascript

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();
});

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 disable Angularjs completely after the page is fully loaded

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.

is using ng-model is inefficient?

I have a very simple use case in my application. when user double click on a record it will show an input box and after submitting new text and hit enter. that will update the record.
all I want to do is grab input elements value and fire service.
<input type="text" ng-model="updatedListTitle" ng-enter="updateList(list.id, updatedListTitle)">
as you can see I am using ngmodel to grab data in my controller. the problem is with every keystroke it is firing all my watchers unnecessarily (even though i know angular is fast and you can fire like 1000 watcher and all ). but just grabbing the element using jquery would be more efficient.
is there any better approach to handle these situation where i really don't care about 2 way binding
Well..., in my opinion the way you have done it is perfectly idiomatic angularjs and I wouldn't start to micro-optimize it.
(Remember "Premature optimization is the root of all evil" as well as Michael A. Jacksons rules about optimization and other quotes - http://en.wikipedia.org/wiki/Program_optimization )
No, I don't think there is any sensible way to do it without jQuery (or at least jqLite or manual dom access).
If you do that, you should encapsulate it in a directive (which arguably is the only place explicit DOM access/manipulation should be).
Can you use ng-blur here instead of ng-enter and then check to see if the model is dirty and then do the service call?
AngularJS sets the CSS classes ng-pristine and ng-dirty on any input field you've used ng-model on, and your controller has the properties $pristine and $dirty which you can check to see if the form is dirty or not.
That might be a bit more optimized. I would still do this in a directive though.

Using angular data binding and directives inside a non-bindable element

I have a form I'd like submitted as usual, so I stuck a non-bindable attribute on it. That works. But I have the need for a field to be filtered on input (specifically, converting a string to a clean version of itself on the fly, thus turning Some Input to some_input while it's still being typed) and this would be very easily achievable in Angular but since the entire parent element (the form) is non-bindable, Angular ignores all children.
I tried putting non-bindable on the submit button alone, but this produces no effect. How can I tell Angular to submit a form as usual, but to still allow angular directives and functionality inside said form, without resorting to vanilla JS and "onkeyup"?
On a more careful readthrough of the form API, I noticed this:
For this reason, Angular prevents the default action (form submission
to the server) unless the element has an action attribute
specified.
Specifying an action attribute was all it took. The form is now being submitted as usual, and I can use Angular within it.
I haven't used non-bindable attribute, but I don't think that it is possible with angular to have non-bindable parent element and use data-binding with children elements at the same time.
I would forget non-bindable and instead solve your scenario by a doing regular angular $http request on form click. You can configure it to look the same as regular form submit.
Or do you have any particular reason why you need browser to make your request from the form for you?

Categories