I am trying to include a search box provided in this local source: http://dnauck.github.io/angular-advanced-searchbox/
I went through all the steps, but I can't figure out how to properly complete this last step:
The angular-advanced-searchbox directive uses an external template stored in angular-advanced-searchbox.html. Host it in a place accessible to your page and set the template-url attribute. Note that the url param can be a scope variable as well as a hard-coded string.
Any help would be great. Thanks
It basically mean that you can create your own template (With your own style and structure) instead of the default. How?
This is the default template the module is using: https://github.com/dnauck/angular-advanced-searchbox/blob/master/src/angular-advanced-searchbox.html
You can use change this template structure (But you should keep the directives that the module need to run) and use it instead of the default template, by wrapping it with <script type="text/ng-template" id="myNewTemplateName.html"></script>:
<script type="text/ng-template" id="myNewTemplateName.html">
<!-- PUT HERE YOUR NEW TEMPLATE -->
</script>
And then you need to introduce your template to the module:
<nit-advanced-searchbox
ng-model="searchParams"
parameters="availableSearchParams"
template-url="myNewTemplateName.html" <!-- NOTE THE TEMPLATE DECLARATION -->
placeholder="Search...">
</nit-advanced-searchbox>
There are additional ways to include and reuse templates in your app - see $templateCache documentation to learn more. There is also this tutorial about templates.
If you look at the source file on the github page, you can see what he means. You can set the template url by the string 'angular-advanced-searchbox.html' which is a relative path to the html file in the same folder, or you can set it by the attribute templateUrl by referring to attr.templateUrl. This would be a string set when you call the directive in your html file as in <nit-advanced-searchbox template-url="templatUrlString'/>
Related
I am working on angularjs project that I generated using yeoman angular generator.
I have a jQuery function that I need to use in most of my html views.
A possible solution is to add this function to a script.js file for example, and add this file as reference in the html views that require this function. However, I don't think this solution is good.
When yeoman generates an angularjs project, in its index.html file, it adds a section
<!-- build:js({.tmp,app}) scripts/scripts.js -->
within this section, the different script files are added since as I think, on build, those files will be unified in a single scripts/scripts.js file.
I tried to do the same by adding the function to a script file, and added the reference of the this script file to this section. The problem is that the function is not working when I try to call it from any view.
What can I do to solve it?
DOM manipulation is done with directives in angularjs you will need to check out the docs: https://docs.angularjs.org/guide/directive
If you are not manipulating the DOM you can create a service that can be injected into any controller.
Services documentation: https://docs.angularjs.org/guide/services
from there you can assign a function in the controller to the scope that can be accessed in the view. e.g.
$scope.MyFunction = function(){
// Code goes here
}
you can call the function in the html as
<div ng-click="MyFunction()"></div>
I have lots of ng-templates like this:
<script type="text/ng-template" id="item.html">
// content
</script>
Now, all of them are in one base.html file and thus the template code has become messy.
I want to put each ng-template in its own html file.
Logical place would be templates folder. But when I tried to reference templates like templates/ng-templates/item.html, I got 404 Not Found.
How can I fix it? Or, what is the best practice of accomplishing this?
Actually you should place your angular templates to the static directory.
Because Django doesn't serve templates, it uses those for rendering.
So, for example you could place your template in /static/templates/item.html, and in angular you reference this template like /{{ STATIC_URL }}/templates/item.html.
I know that it is possible to customize the templates of the ui.bootstrap.typeahead either by:
declaring the 'typeahead-template-url' (for the internal 'typeahead-match.html' file) and/or
using $templateCache to customize the outer template ('typeahead-popup.html').
My issue is that I want to have two typeaheads on the same page, but with different templates, both internal(typeahead-match.html) and external (typeahead-popup.html), is it possible?
Look at the angular-ui-bootstrap FAQ:
https://github.com/angular-ui/bootstrap/wiki/FAQ
The first item there is about the templates... most importantly if you use one of the files with -tpls- in the name, the templates are in-lined (added to the template cache as part of the JS file using HTML strings, thus no longer needing the html files).
When $compile-ing an angular HTML template string I'm trying to put additional controllers and directives inside a <script> tag and use those in the HTML template.
This way I'm essentially trying to implement some sort of plug-in-mechanism, so that I can load external files that augment my app's functionality.
The <script> tag does actually get evaluated, but my problem is, that the HTML template compilation takes place before the evaluation of the JavaScript. So the compiler complains about missing controllers.
Example:
http://plnkr.co/edit/8oZYhRHAjP84ecnl6hG3?p=preview
This example throws an error: Error: Argument 'Controller' is not a function, got undefined
If you delete lines 15-18 (the HTML that references the created conroller) in app.js, you can see in the console that creating a controller this way does actually work.
I finally managed to do it based on the solution in Loading an AngularJS controller dynamically.
Thx #JoseM, #MaximShoustin and #JussiKosunen for your hints and help.
http://plnkr.co/edit/fzmEZlP6bGBJqTOkfApH?p=preview
I have an Angular app that needs to support customizable reporting. My intention is to allow the user to select one of many reports available and have a back end REST api provide the template and the data as JSON (end user can customize the template).
The app would then insert the template somehow into a "reporting" view page then put the data in the scope and Angular should compile and display the report / template.
I've looked into ng-include however that seems to support only an URL or path to a document, however I have the template text already via the REST service and I cannot use static urls or file paths, this needs to be via REST api, if ng-include accepted the template text directly that might work but it doesn't.
I've tried writing a directive, trying to call a method on the page (getTemplate()) that would load the template already fetched from the scope however my directive doesn't have access to the scope apparently.
What tactic should I use to accomplish this? A directive seems best but I'm obviously doing it wrong and completely lost in the docs and my many attempts trying to accomplish this.
You could compile the dynamic template to an element on the DOM in a controller and then in the controller have something like this:
var el = angular.element('#myselector');
el.html(mydynamichtmlfromresource);
$compile(el.contents())($scope);
I would setup your route with template with single DIV container (you could pull all the static container template in a single JavaScript file using HTMLToJS online tool or grunt task):
<section class="view">
<div id="myselector"></div>
</section>
I've tried writing a directive, trying to call a method on the page
(getTemplate()) that would load the template already fetched from the
scope however my directive doesn't have access to the scope
apparently.
Yes you are right, but there is a way to pass data from scope to directive. lets say you want to pass a var "x" from scope to directive
use this
<directive directiveVar='x'/>
inside directive, you need to use isolated scope
"scope": {
"directiveVar": "="
},
this variable will be available only in controller and postlink function, so your directive template needs to be like this
<ng-bind-html="directiveVar"/>
inside the postlink you may need to use this code snippet
$scope.directiveVar =$sce.trustAsHtml($scope.directiveVar)
References
http://docs.angularjs.org/api/ng.directive:ngBindHtml
http://docs.angularjs.org/api/ng.$compile