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.
Related
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)
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
The page shows basic markup, comforting message and loading indicator.
<html>
...
<body app>
...page layout and loading stuff...
</body>
</html>
And root component is
#Component({
selector: 'body[app]',
template: `<ng-content></ng-content>`
})
App {}
A plunker that demonstrates the problem is here.
After SPA initialization it is supposed to bootstrap body element and compile components while saving existing basic layout.
However, root component just ignores ng-content.
This leads to two options. The initial layout should be dumped and shown only after bootstrapping. Or it should be duplicated in both root component template and HTML document (likely with server-side templating). None of them looks good enough.
body contains sensitive markup that cannot be just wrapped into child component to overcome this limitation. I intend to use Angular Universal to provide SPA with neat static preview, but not at this stage.
It looks like it is a known problem but I'm unable to find a workable solution.
How can it be fixed?
The link below has been given the status fixed by ivy. Ivy is a milestone for angular v7.0.
Transcludes are not supported on the root element, you can't pass anything to it because index.html isn't part of angular. If you can't embed the html within another component then I wouldn't expect it to work with ng-content either.
From https://github.com/angular/angular/issues/1858#issuecomment-207993202
Components only work as components when referenced in the template of
another component, yet they are expected to be used outside of this
which causes confusion
Using <ng-content> in root component planned to be implemented.
https://github.com/angular/angular/issues/4946
In an angular js 1.2.22 version code, I saw this in the HTML
<div class="mainContent" ng-include="content"> </div>
and in its corresponding controller, I see this.
$scope.content = 'templates/contents/home.html';
I see its making an Ajax call to load the template.
I am working on improving the speed of the content display and I did some optimizations like minifying the javascript code and minifying css
My doubt is how to make this inline - without making the Ajax call. So, that I could check if there is visible difference in speed of the content showing up for this template?
I tried the gulp-angular-templatecache to cache templates but, it did not work.
Is there any workaround for this so that I can make this template inline ?
What you're looking for is Angular's $templateCache.
Depending on your task runner, you might want to give gulp-angular-templatecache or grunt-angular-templatecache a try.
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.