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)
Related
Angular newbie here.
I have a color picker (jscolor) which works perfectly in my index.html, but I can't seem to use it the same way via my component template.
I have a script tag reference to it in the head of index.html. If I use the tag in index.html, it works perfectly. However, if I use in a component template, it doesn't work at all. I thought after transpilation, the template code would read as part of index.html.
How can I use the jscolor associated html tag in my component template?
JSColor documentation here
You need to properly inject the library to the code and execute it once your application is loaded.
Not sure which angular version you are using, but those threads might help you:
AngularJS JSColor pick up color to trigger AngularJS ng-change
Angular
Importing jscolor library in angular 2
I have to include a html file inside a WebPage (Another HTML ) and I can do it effectively using AngularJs ng-include.
<div ng-include="'storage/html/storageResources.html'"></div>
I now have a requirement where I need to achieve the same using KnockoutJs and not Angular.
Is there something similar in KnockoutJs that I can make use of to include a html page inside another one?
This should be simple but I can't get it done right.
I have some custom angular directives working just fine, and I'm intended to use some in a external (other domain/server/port) html.
First, I included scripts from the working directives webapp:
<script
data-main="http://localhost:9000/vassets/javascripts/main.js"
src="http://localhost:9000/vassets/lib/requirejs/require.js">
</script>
Then I just tried to use one of them in the external html:
<div custom-directive attrib="abcd"></div>
Problem is template associated with directive cant be loaded, since it is declared as:
templateUrl: '/vassets/partials/customDirective.html'
And of course can't be found when external html is loaded.
There are alse issues regarding cross site.
It is clear that I'm not including external directives (and importing its source) correctly.
One thing which can be done is in the directives, instead of referencing to an external template, you can place the template inside the directive itself. Like:
template: '<div>Template here</div>'
Now when you export your directive file to a new app you will have no worries in exporting its template file as well.
Alternatively, you can keep your existing scenario and place the template in the location where the directive is looking for it.
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.
I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.
You should also keep in mind the possibility that the 3rd party website also uses angular,
and potentially a different version.
Check Multiple versions of AngularJS in one page
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.