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
Related
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
I am having a form html as follows:
<div class=\"container\">\r\n\t<div class=\"clearfix row
\">\r\n\t\t<div class=\"col-md-12 column\">\r\n\t\t\t<h3>\r\n\t\t\t\tNew form created\r\n\t\t\t<\/h3
>\r\n\t\t\t<div class=\"form-group\">\r\n\t\t\t\t <label><strong>Enter name<\/strong><\/label><input
name=\"1430985388220267#enter_name\" id=\"1430985388220267\" class=\"form-control\" grid-name=\"Enter
name\" type=\"text\" \/>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>
This form i want to display in mobile app. The mobile app i have developed in ionic framework and cordova with angular JS. When i am trying to show the form as html then it is getting rendered with basic elements like header, bold, labels like content but the input tag it is not showing or else i can say the html's basic data input elements like checkbox, radio button etc are not displayed. I am doing this in the view:
<ion-view title="Fill the Form">
<ion-content class="padding-vertical" ng-repeat="htmlValue in HTML">
<div ng-bind-html="getHtml(htmlValue)">
</div>
{{htmlValue}}
<div class="clearfix"></div>
</ion-content>
</ion-view>
my getHtml function is this:
$scope.getHtml = function(html){
var trusted = $sce.trustAsHtml(html);
return trusted;
};
i have also modified:
angular.module('iot', ['ionic','chart.js','ngSanitize'])
I am pushing the code from REST response into array called HTML
but still i am not getting the expected output what else has remained in this case? Any help would be truly appreciated.
Use filter:
// Filter to enable HTML tags
app.filter('unsafe', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
});
Then include this within your HTML tag along with filter ('unsafe' in this case), for example:
<!-- i.detail will be your valuable -->
<div ng-bind-html="i.detail | unsafe"></div>
I am trying to render a directive and have it properly displayed in HTML with AngularJS. I have a service that takes care of displaying warning messages to the users. Per controller I can call this service and set a message I want to be displayed. Now one of those messages is supposed to include a link. However as I am using the Ionic framework I need to use a directive to accomplish exactly that.
HTML:
<div class="bar bar-loading bar-assertive top-bar">
| {{ message }}
</div>
JS:
$scope.message = "Please visit this link: <a ui-sref='app.settings.profile-show'>Open me.</a>"
However the message is not properly output in the html. If I use the following I get the html, but the directive is not evaluated:
<div class="bar bar-loading bar-assertive top-bar" ng-bind-html="message"></div>
How would I accomplish something like this? Thank you.
I am not sure about Ionic framework, But this is my way to render HTML content. Use $sce.trustAsHtml(html) to render text as html. Your code will look something like this.
// ...
app.controller('yourCtrl', function ($scope,$sce) {
$scope.message = "Please visit this link: <a ui sref='app.settings.profile-show'>Open me.</a>";
$scope.renderHTML = function(html_code){
return $sce.trustAsHtml(html_code);
};
}
html
<div class="bar bar-loading bar-assertive top-bar" ng-bind-html="renderHTML(message)"></div>
<!-- or this way? -->
<div class="bar bar-loading bar-assertive top-bar">
| {{ renderHTML(message) }}
</div>
<!-- not sure about second option, but either should work -->
Hope it helped!
I have a simple angular JS app in which there is a main container html view page, a left menu for navigation between views.
//Left panel menu links
<li><a href ng-click="vm.showPanel('View1')">View1</a></li>
<li><a href ng-click="vm.showPanel('View2')">View2</a></li>
<li><a href ng-click="vm.showPanel('View3')">View3</a></li>
//JS function to load view
vm.showPanel = function (panelName) {
hideAllPanels();
if (panelName == 'View1') {
vm.isView1Visible = true;
}
}
The above is working fine, now what I want to do is add a button in View1.html called "Next" which will load next view that is view2.html & so on.
Please note both view1.html % view2.html are within a container html page.
Can anyone show me what is the angular way of doing this?
Regards
Maintain one variable which contains Views html list, like below, and that can be render it by using ng-repeat
Controller
$scope.viewList = ['View1','View2','View3'];
HTML
<li><a href ng-repeat="view in viewList" ng-click="vm.showPanel(view )">Next</a></li>
More elegant solution would be to re implement you whole show tab and hide tab logic using ui-router or angular-route as it looks like pure SPA thing.
Plunkr for Angular Route
Plunkr for Angular UI-Router
I have this scenario, I am loading part of HTML (which has AngularJS directives) dynamically via script and I see AngularJS is not getting activated.
here is the example I am looking at. Is there anyway I can tell AngularJS to start bind on document ready? Loading an aspx page containing this widget1 content via a iframe seems to work but I am trying to avoid iframe and use client side script.
Appreciate any help.
<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div id="widget1">
<!-- load below div via jquery/or any method from a remote html file-->
<script type="text/javascript">
$("div#widget1").load("/widgetsfolder/widget1.htm");
</script>
</div>
widget.htm file has below content.
<div ng-controller="TodoCtrl">
Total todo items: {{getTotalItems()}}
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" />
<span class="done-{{todo.done}}">{{todo.text}} </span></li>
</ul>
</div>
my controller code below.
`function TodoCtrl($scope) {
$scope.totalItems = 4;
debugger;
$scope.todos = [{
text: 'learn angularjs',
done: false
}, {
text: 'implement angularjs',
done: false
}, {
text: 'something else',
done: false
}, ];
$scope.getTotalItems = function () {
return $scope.todos.length;
}
}`
sample code here
http://jsfiddle.net/devs/RGfp4/
Apero's answer describes what is going on. I believe you are going to want to use ng-include. Your html would look something like this:
<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div ng-include="'/widgetsfolder/widget1.htm'">
</div>
</body>
AngularJS evaluates the scope and renders the page after it is loaded.
Here, your js script loads the widget html but after Angular already compiled the scope etc.
I believe this will not work this way.
You can use angulars ngINclude to fetch outside documents, but I don't suggest it, it can be buggy. You can get the partials using either $http or $resource, this will fetch the data and compile the angular directives inside.
If you want to load the script using some other method, you can store the data as a string inside the controller and use a $compile directive in order to execute the angular code inside it.