I would like to know how to get the Full, Plain HTML of an Angular ngRepeat.
I need it to create reports, alert part of code etc.
I used the $compile and I've been able to get the HTML of simple tags by compiling
<p>I am {{surname}}, {{name}} {{surname}}</p>
and what I got is
<p>I am Bond, James Bond<p>
But when I try to do the same with
<p ng-repeat="number in array">{{number}}</p>
I only get the Angular comment saying
<!-- ngRepeat -->
Instead of the series of paragraphs.
Please check this Fiddle for examples.
In order Angular to compile ngRepeat directive it must be in DOM. Angular finds corresponding comment and replaces it with actual HTML structure.
So all you need to do is to append compiled comment node to DOM and after it's rendered you can retrieve HTML.
$scope.html = $compile('<p ng-repeat="el in arr">{{el}}</p>')($scope);
document.getElementById('app').appendChild($scope.html[0]);
Demo: http://jsfiddle.net/d4p0qLx2/2/
And in the next digest cycle you can get rendered HTML: http://jsfiddle.net/d4p0qLx2/4/
Related
I want to build two table with same record structure.
One table is Main, other table is an Archiv.
The record is a bootstrap divs with col-sm-x structure with {{rec.Name}}, {{rec.Age}} etc.
From the record content I made a tablerecord.html template and i want to use in two different ng-repeat to build tables.
<div> ng-repeat="rec in MainTable"><record_template/></div>
and
<div> ng-repeat="rec in Archiv""><record_template/></div>
To load the record template I use angular directive "recordTemplate".
How to inject "rec" variable in record_template?
Thanks in advance.
you can use the #input annotation in your directive component
https://angular.io/guide/attribute-directives#binding-to-an-input-property
As i don't know how you written your directive. you can check the below link.
http://jsbin.com/gopula/1/edit?html,js,output
and try this
<div> ng-repeat="rec in MainTable" record_template ="rec"/></div>
and
<div> ng-repeat="rec in Archiv" record_template="rec"/></div>
Hope this will help you
I uses angular ui tab (http://angular-ui.github.io/bootstrap/) and I added a delete btn inside the the js file. I can't do it with my markup because the js generate the template on the js side.
my ng-click doesn't work when I put this
<span ng-click="deleteTab()" >dlt</span>
js
$scope.deleteTab = function(){
//$scope.tabs.splice(this, 1);
alert('d');
}
within my controller. I tried to include the js on the topest and before the , nothing work. Until I try onClick. I wonder why I can't use ng-click in my situation?
If you add new HTML to the DOM without using angular, you need to $compile the HTML to let angular to bind the content and $watch changes. See the docs
$compile(element.contents())(scope);
Edit:-
Ah you can give the title as a HTML template as well,see the tabs definition
<tab ng-repeat="workspace in workspaces"
active=workspace.active>
<tab-heading>{{workspace.name}}<span ng-click="deleteTab()" >dlt</span></tab-heading>
<div ng-controller="TabsChildController" >
<div>
{{workspace.id}} : {{ workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
</div>
</tab>
and here is the solution
that's a plunker that could solve your problem.plunker the only doubt is what workspace would you want to close, i imagine it is the last, otherwise you only need to modify the delete method.
EDIT
in this version you can delete the selected workspace, you have to controll the css, but i thin it could be a good solution
new plunker
I have the following fiddle setup to demonstrate what I am experiencing.
http://jsfiddle.net/BjornJohnson/ndxnG/25/
My controller uses these objects: page => rows => columns => pieces. A page has rows. A row has columns. A column has pieces.
There is a custom directive ("piece"). The point of the directive is to be able to provide different types of HTML elements based on the "type" of the piece (so-called dynamic templating).
I keep running into problems when I remove pieces from a column. I am modifying the model, but it's not reflected in the view. It works when the ng-repeat is on a wrapper, but not on the custom directive itself, so I think something is clashing with the ng-repeat directive.
I apologize in advance for using all caps, but I CANNOT USE A WRAPPER DIV FOR THE NG-REPEAT :)
The code in question is both in the view and the directive.
Here's part of the custom directive:
var template = templates[scope.piece.key];
var replacement = $($compile(template)(scope));
element.replaceWith(replacement);
Here's part of the view:
<div ng-repeat="column in row.data.columns" ng-class="column.data.clss">
<!-- notice wrapper for ng-repeat - THIS VIOLATES MY REQUIREMENTS -->
<div ng-repeat="piece in column.data.pieces">
<piece></piece>
</div>
</div>
versus...
<div ng-repeat="column in row.data.columns" ng-class="column.data.clss">
<!-- notice ng-repeat on custom directive -->
<piece ng-repeat="piece in column.data.pieces"></piece>
</div>
I'm currently making a switch from Knockout to Angular. The main problem I'm having right now is in transferring my original templates to something Angular will recognise.
Specifically, here's a bit of code I'm having trouble transferring:
<!-- ko template: { name: 'SquareTempl', data: Squares[5] } --><!-- /ko -->
In Knockout, this will attach Squares[5] to SquareTempl, so that when the template gets rendered, it does so using the members within Squares[5](or whatever data that gets attached).
I need to repeat the process for Squares[0]~Squares[11]. I can't use ng-repeat though since I won't be iterating through them in numerical order.
Ideally, it would be nice if I could do something along the lines of
<td class="Square" id="five" ng-include src="'SquareTempl.html'" ng-data="Squares[5]">
Any ideas?
Here's a JSFiddle I've written to outline a failed attempt I've tried using ng-model.
http://jsfiddle.net/fZz3W/9/
Two things: First, you can make ng-data be available by implementing it yourself YourApp.directive("ngData", function() {}) Secondly, do you need the HTML to be part of another file? An easy way to accomplish what you're looking for in Angular is with ng-repeat like:
<td ng-repeat="item in Square">
<div>{{item.name}}</div>
</td>
When the Square array is updated an additional post will be made.
Review your modified JSFiddle: http://jsfiddle.net/TdWMF/1/
So this is mostly a hack to achieve what you want, until I can offer you a better solution:
Second update using mixed order ng-repeat: http://jsfiddle.net/TdWMF/3/
Basically:
<div ng-repeat="index in [4, 2, 0, 3, 1]">
square index: {{index}}<br />
square: {{Squares[index]}}
</div>
Pretty ugly, and non-ideal, I know. I'd also recommend performing the order array generate in a function and then doing: ng-repeat="index in displayOrder(Squares)"
I want to bind tag name to variable in AngularJs. Direct way doesn't work:
<div ng-app ng-init="list=['pre', 'div', 'em']">
Check the list: {{list}}
<div data-ng-repeat="item in list">
{{item}}: <{{item}}>content</{{item}}>
</div>
</div>
How to do it right?
You're going to want to make a Directive and use the $compile service module.
Angular template system works on DOM tree, not on strings, so template must be valid HTML and usage of {{}} for tagname is impossible. We can write own directive for it (see Max answer) or if here is small set of options it can be more easy to use ng-include and set of templates for options.