I building a basic drag and drop that has various prepared HTML that you can drag and drop into the page.
I got a object with the list of HTML that you can drag
element=[
text: {html: '<p> asdasdasdas</p>'},
list: {html: '<ul><li></li></ul>'};
img: {html: '<img src="placeholder.jpg"/>'}
]
How to inject the html into the page?
Or should I be creating the HTML snippets as component and than having a referenced in the elements object to the component selector and injecting the angular selector and rendering the view?
You can use ng-bind-html to bind html
<div ng-bind-html="element.text.html"></div>
<div ng-bind-html="element.list.html"></div>
<div ng-bind-html="element.img.html"></div>
Notice: You have to include ngSanitize module on your app in order to use ng-bind-html
Related
I'm trying to implement an Angular UI Bootstrap Carousel and have HTML in the texts. Thought I could use something like
text: $sce.trustAsHtml('Nice image <br />test')
but apparently that doesn't work and I've no clue why.
Plunkr: https://plnkr.co/edit/9PvaS8SoRmN1o52wiAf8?p=preview (fork of the offical example from the docs).
Use ng-bind-html directive to display html content on view
<p ng-bind-html="slide.text"></p>
Demo Plunkr
HTML
<body ng-app="myApp">
<div ng-controller="myController">
<my-template src="https://plnkr.co/img/plunker.png"></my-template>
</div>
</body>
JS
myApp.directive('myTemplate', function() {
return {
scope: {src: '#'},
template: '<img src="{{src}}"></img>'
}
});
In my example plnkr, I have an image that is loaded dynamically from a directive template. If you look at the console when you run, you can see an error trying to load "https://run.plnkr.co/xLToRcEuT2Xr8he7/%7B%7Bsrc%7D%7D", which is the unresolved version of the template (%7B%7Vsrc%7D%7D = {{src}}). This is then picked up by angular as a binding and the correct img is loaded.
The code works, but I don't like having errors lying around. I also don't need the bindings in the template hanging around once it's been resolved in the directive, as there is already a binding on the parent element and the underlying children will never change independently.
Is there a way to compile the template before sending it back to the DOM to a) remove the bindings and (primarily) b) avoid this error.
If you want the {{src}} to bind once only, prefix it with a double colon ie {{src}} becomes {{::src}}. Also, add ng-src instead of src to the image ie <img ng-src={{::src}} />
I got this code from a Foundation for Apps page template here: Zurb
the code:
<div class="accordion-item" ng-class="{'is-active': active}">
<!-- {{ varialbe }} -->
<div class="accordion-title" ng-click="activate()">{{ title }}</div>
<div class="accordion-content" ng-transclude></div>
</div>
I realize it's easy enough to use an accordion but that's really not my question. After a little research I found that the above code is using Angular tag templating. However, I'm not sure how I can use this in my code Or why I would. This has to do with dynamically naming the title for what will be an active item in the accordion? In what scenario would I define the title variable being used above? Should the content simply be placed in the div?
using foundation template in your own app.
This is the code from foundation-apps.
$templateCache.put('components/accordion/accordion-item.html',
'<div class="accordion-item" ng-class="{\'is-active\': active}">\n' +
' <div class="accordion-title" ng-click="activate()">{{ title }}</div>\n' +
' <div class="accordion-content" ng-transclude></div>\n' +
'</div>\n' +
'');
$templateCache.put puts the template in its memory and you can get to it with $templateCache.get('components/accordion/accordion-item.html').
If you want to use it in a directive, simply point your templateUrl to "components/accordion/accordion-item.html"
angular
.module('app')
.directive('myDirective', function() {
return {
templateUrl: 'components/accordion/accordion-item.html'
};
})
override foundation's template
if you want to use your own template with foundation's javascript, simply use $templateCache.put().
$templateCache.put('components/accordion/accordion-item.html',
'my custom template');
i tried appending my template to html div tag as shown below my app.js:-
myApp.directive("panel",function(){
return{
restrict:"E",
transclude:true,
template:'<div class=panel ng-transclude >hiii i am panel</div>'
}
});
in my html page i tried to append it to the existing html div tag as shown below:-
<panel>
<div class="button">click me </div>
</panel>
but the text in- template:'<div class=panel ng-transclude >hiii i am panel</div>' which is -hiii i am panel is getting hide from this button -<div class="button">click me </div>, iam not able to see the content inside <div class="panel>....</div> of the template.
I believe you misunderstood. Transclude. Transclude means, "replace everything inside the tag that has ng-transclude on it." It is sort of like saying:
var content = $("panel").html();
$([ng-transclude]).html(content);
If you want to have both of them, then you need to include it separately. Try changing your template to:
<div class="panel"><span>hiii i am panel<span><span ng-transclude></span></div>
Which would show you both.
Here is a fiddle that does it http://jsfiddle.net/17nb3kg1/
AddThis button is not showing in my backbone.js template.
I have the following code in my backbone.js template file:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook sharebtn"></a>
<a class="addthis_button_twitter sharebtn"></a>
<a class="addthis_button_preferred_4 sharebtn"></a>
</div>
and I put the following in the header file.
<script type='text/javascript' src="https://s7.addthis.com/js/300/addthis_widget.js"></script>
The header file is rendered using django templates.
What can I do?
Edit:
I tried putting this in the backbone template:
<div id = "toolbox"></div>
and then putting this at the end of the render function in the backbone view:
tbx = that.$el.find("div#toolbox"),
svcs = {email: 'Email', print: 'Print', facebook: 'Facebook',
expanded: 'More'};
for (var s in svcs) {
tbx.innerHTML += '<a class="addthis_button_'+s+'">'+svcs[s]+'</a>';
}
addthis.toolbox(document.getElementById('toolbox'));
But addthis is still not rendering.
The AddThis plugin script parse the HTML at the moment it is loaded. Your template is loaded asynchronously, as so, AddThis isn't finding the relevant markup to render the buttons.
What you need to do, is to call the AddThis rendering function once your template have been render to screen.
Checkout Render with javascript section of their doc: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api