I was curious on the 'templateURL' field when creating a directive. What is this path relative to? I have had a hard time getting it to read in a file as the replacement for the template, and have tried multiple paths to do so.
That is what this field is for - correct? It looks that way according to the docs.
Thanks.
--
Robert B. Weeks
Just to follow up on this question -
Is this what the 'templateURL' is used for?
In the docs it says "Same as template but the template is loaded from the specified URL" - I have been trying to get this to work as well.
So if I had a config for something like:
return {
restrict: 'E',
replace: true,
scope: {
myName: 'attribute'
},
templateURL: '/path/to/my/file.html',
link: function(scope, iElement, iAttrs, controller) {...}
};
Does 'templateURL' only take an id from an inlined template? Should we try to mimic what ng-include does in our own directives if we need to load the templates from the outside?
Thanks for any info.
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.
That is what I figured as well, but I am not seeing that happen.
I can't figure out how to mimic really in a fiddle, but to show what I am seeing - this path works fine:
<ng-include src="'/resources/templates/replacement.html'"></ng-include>
but using same path in a directive is not giving what I am expecting. I have checked the network/xhr consoles as usual - but never see it try to grab it
With the call:
<current-dataset>Testing the current-dataset for {{serverName}}</current-dataset>
This works fine - with 'template' defined:
var appDirectives = angular.module('app.directives', []);
appDirectives.directive('currentDataset', function () {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div>Replacement Content</div>'
}
});
But if I have that same template in the file listed in the ng-include above:
appDirectives.directive('currentDataset', function () {
return {
restrict: 'E',
replace: true,
transclude: true,
templateURL: '/resources/templates/replacement.html'
}
});
I get nothing, nor do I see any attempt to grab it via xhr in the consoles. Am I doing something wrong in the call above? I have tried wrapping it in '"xxx"' and "'xxx'". Do I need to do something special in the compile or link function?
Thanks - sorry I can't get to work in a fiddle - not sure how I would show that there.
Hmm - ok - the docs say it both ways -the example element does say that - sorry 'bout that - but the description shows it the other, that is where my confusion came from:
"templateURL - Same as template but the template is loaded from the specified URL. Because the template loading is asynchronous the compilation/linking is suspended until the template is loaded."
It does work with it like below (sigh). Thanks for the pointer.
One thing I did note though, is if the included html file begins with a comment (like to describe what it is), it will not load either.
Thanks for the reply. This helped a ton.
It will check the cache for inlined templates and if one is not found it will make an xhr to the url to fetch the template.the url with "/" prefix is relative to the domain, without the "/" prefix it will be relative to the main ("index.html") page or base url (if you use location in the html5 mode).
/i
On Wed, Apr 11, 2012 at 8:38 AM, Robert B. Weeks wrote:
Hello -
Just to follow up on this question -
Is this what the 'templateURL' is used for?
In the docs it says "Same as template but the template is loaded from the specified URL" - I have been trying to get this to work as well.
So if I had a config for something like:
return {
restrict: 'E',
replace: true,
scope: {
myName: 'attribute'
},
templateURL: '/path/to/my/file.html',
link: function(scope, iElement, iAttrs, controller) {...}
};
Does 'templateURL' only take an id from an inlined template? Should we try to mimic what ng-include does in our own directives if we need to load the templates from the outside?
Thanks for any info.
> I was curious on the 'templateURL' field when creating a directive. What is this path relative to? I have had a hard time getting it to read in a file as the replacement for the template, and have tried multiple paths to do so.
>
> That is what this field is for - correct? It looks that way according to the docs.
>
> Thanks.
>
--
Robert B. Weeks
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/8ZM8QAsx0jAJ.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Error: Template must have exactly one root element. was: <html lang="en">
Check for whitespace in your template. You appear to have multiple top level dom nodes in it.
Pete
...from my mobile.
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
<base href="{% static 'js/vendor/myapp/app/' %}" />
<script src="js/Module.js"></script>
(function () {
'use strict';
angular
.module('site.project.app')
.directive('myDirective', [myDirective])
;
function myDirective() {
return {
restrict: 'E',
replace: true,
controller: 'MyCtrl',
templateUrl: 'partials/my-directive.html',
link: function (scope, elem, attrs) {
}
}
}
})();