I am searching for way how to (at one place) override the way how templates are retrieved from templateUrl property (in routes definition, directives, ng-include, etc).
i.e. I want to change url of template for every template request by adding base URL at the beginning.
I was experimenting with template $TemplateRequestProvider but it seems it works only for executing directives and has no influence for routes and its template retrieving.
Has anybody experience with it?
I want to change url of template for every template request by adding base URL at the beginning.
Use the following process:
Assign the base URL to a variable in a JavaScript file
Prepend the variable name to the existing templateURL values
Expand the value via a build script or a provider
References
How to set AngularjJS base URL dynamically based on fetched environment variable?
ngAppRoot
Related
I would like to create a directive that could be initialized with some default settings when the app is initializing (not when added to a page).
Then when used in a page this directive would use these settings (if they were set) to override its internal defaults.
Saying this in a different way, I want to be able to set properties on a directive in the application level, to avoid setting them on each instance
One option I found to do this, is to create a new directive, wrapping the one in question. In this new directive we will get the global app setting, and provide it to the internal directive.
In this way we can avoid providing the setting value in each page the directive is used in.
I'm trying to update a custom directive in AngularJS - it currently has a fixed template specified within the code (using the template: attribute).
I'd like to allow the user to optionally provide their own template instead, using the templateUrl: attribute.
My problem is how to provide a fallback - I can't use both template and templateUrl in the same directive. This is required to allow backwards compatibility.
I've tried using a function for templateUrl, but returning HTML isn't a runner there.
Any other suggestions?
If you use function in templateUrl, you are suppose to provide "template identifier" Angular first looks into the template cache, if its not found it tries to do asynchroneous request for the resource of the same url.
So you can simply put your default template into the file and just return its identifier as default.
By the way, if you are using templateUrl and html in separate files, be sure to use some kind of tool like https://www.npmjs.com/package/ng-html2js in the build process.
I have two custom element directives:
<my-directive-parent></my-directive-parent> //only one
and
<my-directive-child></my-directive-child> //variable count
The my-directive-parent directive has its own controller and templateUrl properties defined in its directive definition object. The my-directive-child directive has its own link, scope, templateUrl and require properties defined in its directive definition object. The fourth parameter passed into the link function is the parent my-directive-parent's controller. This is working as expected.
Based on user input, instances of my-directive-child are appended to or removed from the parent my-directive-parent DOM via the my-directive-parent's controller. Since I'm using ngView for the top-level page, changing pages results in Angular automatically cleaning up the various directives and their controllers of the top-level page. Upon returning, the controller for the page re-runs, but the user appended views do not show up (since they were previously wiped out automatically by Angular). I'm using a service which holds the data representing the collection of my-directive-child instances that were previously added.
My issue lies in restoring the my-directive-child directives based on this cached service data. Currently, when the my-directive-parent directive's controller is run, I'm getting the service data array that represents the instances to be added, looping through it, and adding a new my-directive-child instance to the DOM. This is working, but upon restoring each instance I need to pre-populate it with data that was previously entered by the user (of which is recorded in the service). Currently, when adding to the DOM this way each instance is in a "blank" state instead of a desired pre-populated state.
So I have the data needed to recreate the child directive instances, but I'm unable to pre-populate them with the necessary data.
I've tried to place a custom attr on the my-directive-child in an effort to forward the data to the instance's scope, but I learned from Angular's API docs that:
The new scope rule does not apply for the root of the template since the root of the template always gets a new scope
Questions:
Is my approach wrong? What should I be doing?
Is there a way to pass attrs defined on the actual element directive into the directive's scope that represents the inner template HTML?
How do I ensure a custom directive within a custom directive properly pre-populates itself?
Thank you in advance for any ideas, answers, or thoughts that might lead to a solid solution.
I am trying to write a directive that will format content for modal display (using Bootstrap classes) if given a certain parameter, and as standard view if not. I have this working for a view loaded directly, toggling on a URL param (?modal) available to $routeParams and/or $location.
I want to use this toggle-able template as a "pipe" for other templates. However, the intended content URL will never be the visible URL when used as a modal. I can't get it working when loading the view with $modal.open or ngInclude, because $routeParams/$location has data for the including page, not the included one.
I put this in a Plunker, but because Plunker also doesn't provide the URL param, the modal view isn't available.
Does Angular provide a means to change the template or templateUrl much later in the process? For example, could I use $scope, either from a controller or on the directive, itself?
Clarification: The goal here is to have one template/partial for each component, with that template used either as a standalone or a modal, based on some switch. The _modal and _alone partials in the Plunker convert the component template into the desired state.
$modal.open takes a single object parameter one of the properties of this config parameter is templateUrl
http://angular-ui.github.io/bootstrap/
So you can create the config object and open the modal with any template you need.
Dan Wahlin uses this technique for a dialog service and then in this article goes on to demonstrate a full modal service
http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service
There were a couple of issues with your code:
First of all the use $routeParams if you don't use ngRoute's $routeProvider.
In your case, it might be easier to use $window.location.search (and compare it against ?modal).
That said, in order to properly display a Bootstrap modal, you need Bootstrap's JS file (which in turn requires jQuery) and you also need to create the modal (e.g. by calling $('.modal').modal()).
Take a look at this modified demo.
For better intergration with Angular's components, you might want to look into UI Bootstrap.
I'am new to Angular.js, and I am trying to use different templates inside a directive for different clients.
The problem is, I have three templates for three kinds of clients, and I want to use different templates for my directive based on the result of client type after detection
The results I found after Googling was all about adding attributes to the directory tag, but by the time I have detection result ready, the template is already compiled.
Any suggestions?
You could inject a variable into your directive to look in a different directory for the template.
myApp.directive('testDirective', [
'clientType', function(clientType) {
return {
...
templateUrl: '/templates/' + clientType + '/test.html'
};
}
]);
Then you can set the constant 'clientType' outside of your app and pass it in as a constant.
myApp.constant('clientType', 'mobile'); // Some type of function to determine this
You may need to manually bootstrap your app in order to use this effectively though. I am doing something similar in production code to control where templates are loaded from.
You could use ngSwitch within your directive template.