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!
Related
I've got this template:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" ng-repeat="product in ad.products">
<a href="{{product.link}}">
<h1>{{product.title}}</h1>
<img src="{{product.src}}">
<p>{{product.description}}</p>
<h5>{{product.price}}</h5>
</a>
</div>
</div>
</div>
From my controller I need to evaluate this template so that it checks how many products that have been selected and then it interpolates each product's values into the template. After that is done I also need to remove the ng-repeat so it doesn't fire an error in the external pages that will use this where angular is not present. However I'd figure that I'd just use a regex to look up the ng-repeat and everything in the expression and then remove it.
I've been looking at $interpolate and $compile but I can't figure out how to work with them from my controller so that it does what I want. This is because when I use these on my template and then console log the template value it's a function with a whole lot of nonsense in it.
So doing this:
ad.html = $compile(res.data, $scope);
Generates something like this:
function(b,c,d){rb(b,"scope");e&&e.needsNewScope&&(b=b.$parent.$new());d=d||{};var h=d.parentBoundTranscludeFn,k=d.transcludeControllers;d=d.futureParentElement;h&&h.$$boundTransclude&&(h=h.$$boundTr…
Can someone shed some light on how to achieve what I want?
Your are using $compile function in wrong way, you should call $compile(html) function by passing $scope parameter like below.
var compiledDOM = $compile(res.data)($scope);//then do append this DOM to wherever you want
ad.html = compiledDOM.html(); //but this HTML would not make angular binding working.
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'm trying to show the user a list of items inside of a popover that is all inside an ng-repeat. I'm using angularjs as well as the ui-bootstrap package (http://angular-ui.github.io/bootstrap/).
HTML
<div ng-repeat='session in sessions'>
<p popover="{{session.items}}">view items</p>
</div>
This will show the array session.items for each session, which contains the information I want to show. However, this shows the brackets of the array as well.
Does anyone know a clean way to do this?
any help would be appreciated, thanks in advance
From ui-bootstrap site you can read
uib-popover - Takes text only and will escape any HTML provided for the popover body.
So if you provide session.items you will get string '[my array content]'. In my opinion you need to use uib-popover-template where your template would be like
<div ng-repeat='session in sessions'>
<p uib-popover-template="'urlToMyTemplateHere'">view items</p>
</div>
------ Template
<div ng-repeat="item in session.items" ng-bind="item"></div>
uib-popover-template takes an url to the template so you have to create file for it to be fetched or try this approach ( I don't really like it but just for testing )
<div ng-repeat='session in sessions'>
<p uib-popover-template="'iamabadapproachtemplate.html'">view items</p>
</div>
<script type="text/ng-template" id="iamabadapproachtemplate.html">
<div ng-repeat="item in session.items" ng-bind="item"></div>
</script>
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.
I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
/items/items.ctp
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
Add
</div>
</div>
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $scope.order.id,open:true,close : "x", onClosed:function(){}});
}
/items/add.ctp
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
<h2>{{order.label}}<h2>
</div>
</div>
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario