I want to extend pagination directive (from angular-bootstrap),
but cannot find information how to extend built-in directives.
Basically i want paginate to do what it does + extra functionality of displaying [currentPage]/[totalpage] next to pagination buttons.
I don't want to create nested directive in pagination, just want be able to use:
<pagination
class="pagination-sm"
boundary-links="true"
<!-- based on attribute below i want to display 'current/total' -->
meta-info="true"
>
</pagination>
Can anyone help or navigate to helping source?
There is a way to "extend" 3rd party directive without modifying the source code using $provider.decorator()
Please refer to http://angular-tips.com/blog/2013/09/experiment-decorating-directives/
It is a little long, but satisfying when getting it work.
If you need to only overload template (and not JS logic of directives/controllers), you can very easily update ui-bootstrap to your needs :
in a template, just add :
<script id="template/pagination/pagination.html" type="text/ng-template">
<ul class="pagination">
...
</<ul>
</script>
You can also put that in a dedicated file and use grunt/gulp and html2js in order to automatically put in the templateCache :
angular.module('myApp', ['ui.bootstrap']).run(
['$templateCache', function($templateCache){
$templateCache.put('template/pagination/pagination.html',
"<ul class=\"pagination\">\n" +
" ...\n" +
"</ul>\n");
}
]);
That will replace the existing templates. Usefull when you want to add css classnames or updates labels. If you need to add logic, that's not sufficient (see other answer)
Related
I'm using Angular 1.4 typescript, with Kendo (using angular directives).
I'm trying to make a RowTemplate for each row, to change the color based on a property of the item.
I know there are some approaches with jQuery, but I find them very displeasing... If I'm using angular, I would like to reference items with angular.
This is my HTML:
<div id="resultSubTasksGrid"
kendo-grid="resultGrid"
k-options="vm.gridOptions"
k-columns="vm.columns">
</div>
This is my gridOptions:.
gridOptions: kendo.ui.GridOptions = {
rowTemplate : "<tr data- uid='#: uid #' ng-class='sent: item.IsSent'></tr>"
}
My problem comes here: I don't want to override the full row. This approach does so. I have lot of columns, and almost all of them have celltemplates I don't want to lose (but I don't want to have them all in the RowTemplate either).
I would like to know if is it possible to have something like:
rowTemplate : "<tr data- uid='#: uid #' ng-class='sent: item.IsSent'>{{RENDERCONTENT}}</tr>"
Well, it seems that by how Kendo it's developed, once you set up a row-template, you need to go all in. There is not such thing as partial template or wrapper.
More information here.
I am using angularjs ui bootstrap, and I have my popover template all set up and working. Here is what I have.
directive.html
...
popover-title="Title"
popover-template="'popover.template.html'"
...
A bit lower in the same directive I have the template:
<script type="text/ng-template" id="popover.template.html">
<label>Popup Title:</label>
<span>Popup content</span>
</script>
Now I will need this popover for a few elements, so how can I put it in an actual popover.template.html file in my source tree I just made in the same directory in the simplest way (least lines of code) possible?
The solution was this:
leave the script tags needed for inline tags behind
give the template parameter the full path
create a new file in the desired place, no header needed inside
then add to the element you want popover to work on this:
popover-template="'app/templates/popover.template.html'"
No need for templateCache or any other tricks, the site only sends a single request, even with multiple elements using the same template. It loads on first request.
Good day. I have a question:
is there any way to restrict to angular adding additional classes for element for animation?
i.e.: when element has some transition in CSS, and i try to add another class with ng-class, it also adds: class-add, class-add-active.
I don't want angular to add this classes.
Yes there's a way to do it, you need to add a filter on class names you want to animate via a regex
angular.module('myApp', ['ngAnimate']).config(['$animateProvider', function($animateProvider){
$animateProvider.classNameFilter(/myClass/);
}]);
<div class="myClass"> ... </div>
There are two ways in which one can make headers using Ionic framework.
<div class="bar bar-header bar-dark">
<h1 class="title">Title</h1>
</div>
And
<header-bar title="'Title'" type="bar-dark">
</header-bar>
Links in Documentation :
For first : http://ionicframework.com/docs/components/
For second : http://ionicframework.com/docs/angularjs/views/header/
What is the difference between them?
The first is native HTML elements using the predefined CSS class names.
The second is using an AngularJS directive. Basically it is a custom element that at runtime will be replaced by a template. See here for the actual AngularJS directive definition. You can see the template that replaces the original element.
Directives like this will play an interesting part of the future of the web. There is a standard on its way in Web Components that will standardize these kind of markup constructs. Besides directives in AngularJS there is another popular way of doing this style of components using Polymer.
I'm new to AngularJS, coming from a PHP background where I do all the template aggregation on the server. With PHP I would grab several templates, mash them together, then send it to the clients browser. AngularJS allows me to insert a template using ng-view. This is great, but it doesn't handle the case where the template that I insert may include tags that are placeholders for other templates. For example, I may have the following as one of my templates:
<div class="some_class">
<div class="another_class">
{content}
</div>
</div>
In PHP I would insert this template, then replace the contents of {content} with another template. In AngularJS I know how to insert the main template (using ng-view), but I'm not sure how to dynamically load my "partial template" into the {content} tag. How is this suppose to be done with AngularJS?
A straightforward approach would be to use the ngInclude directive:
<div class="some_class">
<div class="another_class">
<ng-include src="templatePath"></ng-include>
</div>
</div>
Then, in Controller that is associated with this template you can define the templatePath variable dynamically:
function MyCtrl($scope){
$scope.templatePath = // define this var dynamically here
}
Using ng-view to nest multiple templates is not currently supported natively in Angular.js. There are, however, multiple options to emulate that functionality. See the answers in this SO question for several of those options, including the ui-router suggested by akonsu.