I am using the official Bootstrap UI for Angular and I'm having problem rendering expressions in template of ui.bootstrap.popover.
Here's a component in my HTML:
<edit-button url="myurl.php" form="myNewForm"></edit-button>
It's template is as follows:
<button uib-popover-template="app/edit.html"></button>
And, here's edit.html:
{{1+1}}
I'm receiving this error:
unrecognized expression: {{1+1}}
What do I do? What's the problem here? I'm actually trying to use SchemaForm directives instead of {{1+1}}.
You need to put the template inside simple quotes, like this:
<button uib-popover-template="'app/edit.html'"></button>
Related
I'm using vue-material and I have:
<md-dialog-confirm
:md-active="true"
md-title="Make an Outboud Call"
md-confirm-text="Agree"
md-cancel-text="Disagree"
md-content="some <p>HTML</p> here"
#md-cancel="$emit('closeModal')"
#md-confirm="$emit('accept')"
>
For md-content, I can pass HTML but want it to be rendered via the Vue.js template engine so I can use my {{template interpolation }} as needed.
Can someone please help?
You could pass a dynamically generated HTML. If it is just a simple case, you could even do it inline with a template string:
<md-dialog-confirm
:md-active="true"
md-title="Make an Outboud Call"
md-confirm-text="Agree"
md-cancel-text="Disagree"
:md-content="`some text with the value <b>${yourVariable}</b> here`"
#md-cancel="$emit('closeModal')"
#md-confirm="$emit('accept')"
>
Note the : in front of md-content which is the shorthand for v-bind.
Anyone already encountered the error when using special attributes for HTML tags via thymeleaf?
Example:
Thymeleaf will be using this HTML code,
<div class="draggable-header-view"
#mousedown="startDrag" #touchstart="startDrag"
#mousemove="onDrag" #touchmove="onDrag"
#mouseup="stopDrag" #touchend="stopDrag" #mouseleave="stopDrag">
</div>
#mousedown etc are also used by vuejs.
However, when Thymeleaf will use this HTML code, Exception parsing document will occur.
My guess is that # in Thymeleaf is a reserved keyword. It is used for #{value}.However, # is also used for vuejs.
Has someone been able to do some workaround for this?
Thanks.
I've no idea what is that tech you are using, but if it's only a forbidden # problem as you suggest, be aware that it's just a shortcut for v-on:.
So you should be able to write it this way:
<div class="draggable-header-view"
v-on:mousedown="startDrag" v-on:touchstart="startDrag"
v-on:mousemove="onDrag" v-on:touchmove="onDrag"
v-on:mouseup="stopDrag" v-on:touchend="stopDrag"
v-on:mouseleave="stopDrag">
</div>
I currently have a partial HTML that is being routed to, with a template and a custom Controller. The code snippet in my Angular template I would like to get working is:
<input type="text" typeahead=val for val in getValue($viewValue)>
However, it never enters into the function getValue(), while all other functions in my controller seem to be okay. When I take the typeahead out of the Angular template/partial, it seems to work. Why is this and how do I fix it?
You need to have an ng-model attribute to use the typeahead directive from AngularUI, even if you don't need to bind it to anything.
Change your markup to similar to the following:
<input type="text" ng-model="typeaheadVal" typeahead="val for val in getValue($viewValue)">
First of all: I am absolutely new to AngularJS but worked on MVC-projects in other languages.
I try to bind a Property containing HTML.
This is the code:
HTML:
<div ng-controller="MyController">
<p>{{About}}</p>
</div>
JS:
.controller('MyController', ['$scope', function($scope) {
$scope.About="This is me<br/>and not you!"
}
Now the HTML is encoded which I do not want (the <br/> should result in line breaks)
I already tried <p ng-bind-html="About"></p> but that resulted in no output at all
You need to allow html in your text which Angular does not by default.
Plunker: http://plnkr.co/edit/K4KRCQi4Rpe99MJel5J2?p=preview
Angular Docs for $sce
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires
bindings in certain contexts to result in a value that is marked as
safe to use for that context. One example of such a context is binding
arbitrary html controlled by the user via ng-bind-html. We refer to
these contexts as privileged or SCE contexts.
<div ng-controller="htmlChar" ng-bind-html="about"></div>
<script>
angular.module("app",[])
.controller("htmlChar",function($scope, $sce){
$scope.about= $sce.trustAsHtml("This is me<br/>and not you!");
});
angular.bootstrap(document,["app"]);
</script>
You shoudln't need to insert html through model binding in AngularJS since the philosophy of the framework is to keep the HTML (page's structure and style) intact and only bind the data to be shown inside that HTML.
If you really need to bind HTML tags into your data you need to use the $sanitize service.
You have to use angular compile functionality here, go through the link to get more information angular compile
I use CKEditor in my AngularJS Application. When I try to display the text that I saved from the TextEditor, it doesn't take the style. For Example if I want to display a sentence it appears as:
<p>How old are you</p>
instead of :
How old are you
I tried using ng-bind:
<div ng-bind="Item.Header"></div>
and the regular binding method:
<h3>{{Item.Header}}</h3>
But both methods didn't work. Is there a solution for this issue?
You should use "ngBindHtmlUnsafe". Since this command doesn't sanitize the expression, but you should only use it if you trust the source.
So the html will be written as follows:
<div ng-bind-html-unsafe="Item.Header"></div>