I am using Angular Bootstrap's typehead, which provides an attribute: typeahead-template-url, which can be used to set a custom HTML template to display the typehead items. In the example, this is set as: customTemplate.html in HTML and the template is created as so:
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</a>
</script>
Can I define this template in my main JavaScript file, as opposed to creating a script tag for it, as above?
I am looking for something like:
HTML:
<input typehead=".." typeahead-template-url="tpl.html" />
JS:
Angular.setTemplate( 'tpl.html', '{{item.name}}' )
Related
I am trying to make a very simple include work with angular but it tries to find an action by the name test. How do you make it use the script tag and therefor throw a 404:
<script type="text/ng-template" id="test">
<div>dfdd</div>
</script>
<ul ng-app="fileshareApp" ng-controller="TreeController" >
<li ng-repeat="data in tree" ng-include src="'test'"></li>
</ul>
I have created discussion forum application in angularjs. Once the user clicked the reply button on the post, I want to show the editor which is in the separate html file. How can I include that template on clicking the ng-click under that specific post.
How about a combination of ng-include with ng-if?
If you want to inject a template based on a certain condition, you can do it like this:
<div ng-include="'template.html'" ng-if="yourCondition"> </div>
where template.html is your filename and yourCondition should be an boolean expression.
Here is a plnkr to demonstrate: http://plnkr.co/edit/m50nKigoOWYwuczBIQdQ?p=preview
As suggested above we can use combination of ng-if and ng-include to achieve require functionality :
<html ng-app="includeApp">
<head>
<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="AppController.js"></script>
</head>
<body ng-controller="AppCtrl">
<button ng-click="injectReply()">Include Reply</button>
<div ng-include="'reply.html'" ng-if="isReplyIncluded"></div>
</body>
</html>
Now code containing AppController.js :
angular.module('includeApp',[])
.controller('AppCtrl',['$scope',function($scope){
$scope.isReplyIncluded=false;
$scope.injectReply= function (){
//add reply.html by making this variable true
$scope.isReplyIncluded=true;
}
}]);
Reply.html
<div>
You can add your editor html content here
</div>
I have a directive which uses three different templates:
http://jsfiddle.net/edwardtanguay/pLrkya7r/4
These templates each have a panel and I want them to include a header template which is the same for each of them, like this:
<script type="text/ng-template" id="itemMenuTemplateUndefined">
<div class = "panel panel-default" >
<div ng-include="'itemMenuTemplatePanelHeading'"></div>
<div class="panel-body">
<div>Age: {{item.age}}</div>
</div >
</div>
</script>
The included template looks like this:
<script type="text/ng-template" id="itemMenuTemplatePanelHeading">
<div class="panel-heading">{{item.firstName}} <b>{{item.lastName}}</b> (PROBLEM INCLUDED BUT NO COLOR)</div>
</script>
The problem is that although it includes the scope variable values and HTML, it doesn't seem to have the same HTML structure which causes e.g. the panel header color not to display.
How can I get this example to work so that it has the same HTML structure as without ng-include so that Bootstrap continues to work?
The problem is that the bootstrap css is very specific in targeting the panel heading as a direct child of the panel using selectors like .panel-warning>.panel-heading.
The extra <div> for the ng-include breaks this child relationship making it
<div class="panel">
<div ng-include>
<div class="panel-heading>
Some possible choices:
Add appropriate classes to the ng-include div
Copy the css rules and replace the > in selector with a space
Use your own directive instead of ng-include and within the options
set replace:true
I have a directive by name cngView
controller.js
//directive to include view panel
angular.module('cngFoundation', [])
.directive('cngView', function() {
return {
restrict : 'CAME',
templateUrl: 'templates/view.html'
};
});
to access directive
<div ng-app="cngFoundation">
<div id="mainbody" class="container">
<cng-view>
[AAA]
</cng-view>
</div>
</div>
The templates/view.html is as follows
<!-- View Panel-->
<div class="panel panel-primary " id="view" >
<div class="panel-heading">
<h3 class="panel-title" ><b>View</b></h3>
</div>
<div class="panel-body">
[BBB]
</div>
</div>
I have made the cng-view tag work but I don't know how to give contents inside the tag.
How to make contents I give at place "[AAA]" appear at "[BBB]" .
In short how to make contents I give within cng-view tag(a custom tag) go into the specific place inside the template content of the cng-view .
Please give guidance . At least please direct me to some online tutorial .
Thanks
You need to use ng-transclude which tells template where to place existing content
<div class="panel-body" ng-transclude></div>
Also need to set transclude:true in directive
See section Creating a Directive that Wraps Other Elements in directive docs
You can use the built in ng-transclude directive. In your view.html replace [BBB] with
<span ng-transclude></span>
also be sure to define transclude on your directive
transclude: true,
For a working example see this plunkr
In this "hello world" example of a Backbone app http://arturadib.com/hello-backbonejs/docs/5.html, the author renders a template inline like this
render: function(){
$(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
return this; // for chainable calls, like .render().el
},
which, although functional, is a bit of an unmanageable html concatenation.
I've seen authors of other Backbone apps set a template in the view using underscore's template function
template: _.template($('#my-template').html()),
and then render it instead of the html
$(this.el).html(this.template(this.model.toJSON()));
I wanted to try this technique with the hello world app, but when I created the template file, I ran into the problem that it wasn't strictly html. As you'll notice it calls functions
this.model.get('part2')
and the template that I was using as a model (from another author's app, see below) just included html.
Question, What would I need to do to include javascript and html in the same template file so I can make a call to the model?
<script type="text/template" id="item-template">
<div class="company">
<div class="display">
<span class="company-text"></span>
<span class="company-mood">
<span class="mood"></span>
</span>
<span class="company-destroy"></span>
</div>
<div class="edit">
<input class="company-input" type="text" value="" />
</div>
</div>
</script>
See this link Underscore Template for details on what you want to accomplish.
But in general, if you just wanted to interpolate your this.model.get('someAttr'); all you'd need to do is include this in your template.
// Since you call it like this:
$(this.el).html(this.template(this.model.toJSON()));
// Just include this
<div>
<%= someAttr %>
</div>
You're basically passing in the model attributes object and the underscore template just interpolates the properties of that object. You can pass in anything you want although what you do with the render call is what's probably most common.