Apply angularjs controller functionality on dynamically loaded content - javascript

I am new to AngularJs and I got stuck with a situation where I need your help.
I am loading content using $http service within an angularjs controller and on loading the content I am replacing the new content (with the new controller) from Ajax with the whole currently working controller and I am doing this replacing part using jQuery .html() function. Now the issue is that the content loaded perfectly but the functionality of new controller is not working at all.
As I told that I am new here, please guide me if I am following right technique and what would be the solution to this problem or is there any new option to do task.
I also tried loading the content with directive but after using it, the loaded content won't perform any functionality at all.

you need to compile the new content (with new controller) before replacing it. you can use $compile service for that.

This works for me.
angular.bootstrap($('body'), ['app']);

Related

How to load angularjs "ng-app" dynamically using javascript?

I created an web application in javascript and jQuery. Rendered dynamic html page using jQuery .load() method.
File home.html, included angularjs.min.js file. This page having one button "loadUsers". On click handler of the button loading "userList.html" file in a container ("#userContainer") same page.
The userList.html sample content is like below,
<div ng-app>
Enter Your Name: <input type="text" ng-model="txtName" /> <br />
Hello {{txtName}}
On input, the value is not binding with model. Angular is not applied for dynamically loaded template.
Any one guide me how to achieve this?
The AngularJS framework scans the DOM for the ng-app directive at DOMContentLoaded. If the directive is added later (say after an .ajax call), the directive is ignored.
Any apps added to the DOM after DOMContentLoaded need to be manually bootstrapped:
angular.bootstrap(document, ['myNgApp']);
For more information, see
AngularJS Developer Guide - Bootstrap
AngularJS angular.bootstrap Function API Reference
AngularJS and jQuery can live together if done wisely. In fact the AngularJS framework will use jQuery internally if the jQuery library is loaded before the AngularJS library.
For more information, see
- AngularJS angular.element Function API Reference.
The main question is:
Why do you need to use jquery and angular together?!
I think you can move the ng-app to body or html tag. When the content is loaded use $compile service to append $scope to your view. (angular 1.7)

Dynamic Content don't working with Angular Js (Angular Material)

I just added the dynamic content via ajax. but the angular bindings are not working with the dynamic content.
I just found an answer on stack over flow to use $compile. I tried now it works but angular material things are not working now.
Please can someone suggest a solution.
That would be nice :)
Update with Code
consider the following to be added content by ajax.
var data = md-slider>
this content when added by ajax doesnt work so i did a compile.
var html = $compile(data)($scope)
and then when we add this to the document via jquery the slider doesn't work.
$('#example').html(html);

AngularJS losing two way binding after JS form plugin rendering

I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.

How can I get AngularJS binds working with a fancybox dialog?

I'm learning AngularJS and I'm having some difficulties with dialogs.
Since i'm converting my app from a classical Jquery-based to an angular one, i want to use Fancybox to open dialogs with custom dynamic HTML inside, with the fancybox open method.
$.fancybox.open(html);
I wrote a service to use fancybox: now i open my dialogs but the content inside the dialog is not "compiled" against angular, so any angular directive set on that HTML doesn't work.
See the example
http://plnkr.co/edit/UwryF1ocleyND7zxCGJz?p=preview
I imagine that the problem is in the service, but i don't know how to fix it. Could you show me how i can get an html sensible to angular directive inside the HTML shown in the dialog?
UPDATE:
i've tried to use $compile, and set a directive instead of a service (calling the method inside the directive directly from ng-click)
http://plnkr.co/edit/Y18bRSMdV62VObMGJ2Ie?p=preview
what's wrong now? why my $compile doesn't work as expected?
The problem is that angular looks for function expressions only on the scope and NOT on window as plain-javascript does. Hence, when you add an alert function on the $scope, it will be wired correctly: http://plnkr.co/edit/y02UMQ2kU4fh8Imsa82u?p=preview
$scope.alert = function (phone) { window.alert(phone.name); };

angularjs - After changing views using routing the jquery elements doesn`t get rendered

My issue is that after changing views using routing, the jquery components in my page doesn´t get rendered. I have customized ui components like dropdowns that are not being processed. I saw this answer: Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view
But I can´t figure out how to make it work in my case. It seems that when angular renders the template, any but angularjs code is processed.
Thanks so much in advance.
Code: http://plnkr.co/1mwMcsqMxWGTheoQmJ22
In the example you've provided, you're not actually loading the file with the jQuery code in it (jqcode.js).
The real problem however, as you can see in this version of your example, is that the document ready event is executed before your template has been loaded and rendered. This means that the element your jQuery code is attempting to target does't exist when you try to manipulate it.
You should really look into Angular directives which is where you are advised to place any DOM manipulation logic within an Angular project:
If you have to perform your own manual DOM manipulation, encapsulate
the presentation logic in directives.
From the Angular documentation for controllers.

Categories

Resources