AngularJS code:
$scope.checking="<div style="color:red;">check</div>";
HTML code:
{{checking}}
Result in HTML page in browser:
<div>check</div>
Now what I want is that the $scope.checking variable be parsed in HTML as if it's a tag I defined.
So the result in html page should be:
check
and the above should come in red color
Any way to do it? hopefully its simple... AngularJS experts please help!
i got the output but the string doesnt come in red! the style tag is ignored! how can i do it? do i use interpolate?
Use ng-bind-html!
Here is the docs-page for ng-bind-html. This will help you.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
ng-bind-html will render your html-string in the browser.
Perhaps you have to "trust" your html string like here: http://erikaugust.com/thoughts/ng-bind-html/
Related
Is there an easy way to keep empty <p> visible in wysiwyg when using TextAngular?
If the string is <h1>test</h1><p></p><p></p><h2>subtitle</h2>, when the page render and the content is passed to TextAngular, the HTML source code has all tags, but the wysiwyg doesn't show them.
Did I miss something?
Thanks
Edit: here is a fiddle to demonstrate
It's not an elegant solution, but you can parse your html string and add to your empty tags.
this.html = "<h1>Test</h1><p> </p><p> </p><h2>Test</h2>";
I am using $scope to set the background image of a div tag in my html using inline styling.
This is my code:
<div class="banner" style="background-image: url('{{bannerImage}}'), url('images/generic.jpg')"></div>
The scope works fine but I get this error in my console.
GET http://localhost:9000/%7B%7BbannerImage%7D%7D 404 (Not Found)
Anyone have an idea what may be causing this?
You need to use ng-style instead since you are outputting an expression. Using plain style won't make Angular evaluate the bindings.
You can use ng-style. May be it can help.
I am having a problem were I cannot tell jade to render my custom elements of angularjs origin (directives), I want to know if there is any way to escape the tags so maybe at least they will be rendered as they are instead of going for the jade pre-processor, or maybe a way to tell jade to render my custom element somehow.
The current code looks like :
html
head
link(href='/main.css', rel='stylesheet')
script(src='/lib.js')
script(src='/main.js')
title!= "Neuron#l"
meta(charset="utf-8")
link(rel="icon",href="/images/neuronal.png")
body(ng-app="app",ng-view)
"<top:bar></top:bar>"
"<left:bar></left:bar>"
If the problem it's top:bar and left:bar here is the solution:
html
head
link(href='/main.css', rel='stylesheet')
script(src='/lib.js')
script(src='/main.js')
title!= "Neuron#l"
meta(charset="utf-8")
link(rel="icon",href="/images/neuronal.png")
body(ng-app="app",ng-view)
top:bar
left:bar
Do you know why is the {{ project.title }} before I see the real value of the scope.
And how to solve that ?
EDIT : <title>{{ pageTitle }}</title>
Page is loading
Page completely loaded
Your views for Angular.JS apps are just static HTML. If you remove the script tag that references Angular.JS, you'd end up with a page full of curly brackets in plain sight that never get replaced.
When your browser finished loading Angular.JS and loading your application, the expressions in those curly brackets are evaluated. That's why you see, for a brief moment, {{…}} in your page title.
As noted by others, the ng-cloak directive is usually the way to get rid of the flickering before the app is fully loaded.
But since ng-cloak is just CSS, it cannot be applied to the page title. You'll need ng-bind for that, as noted here.
<title ng-bind="pageTitle">Default Title</title>
You should be showing the code, but in general it's probably because you aren't using ng-cloak https://docs.angularjs.org/api/ng/directive/ngCloak
However, in the case of the title, you need to use ng-bind=project.title instead <title>{{ project.title }}</title>
Check How to hide {{title}} in <title> tag while using AngularJS?
To prevent this, you should use ng-bind instead of {{ }} for the first screen of your app.
ng-bind is a directive that is added to an element attribute, so it is displayed only when the page is loaded.
According to the description of ngBind, we usually use {{ expression }} to replace ng-bind. But in a first-loading situation, image that you firstly load AngularJS(maybe in index.html), it'll show the original {{ }}. After that, it transits to what u need. To overcome it, you can use ngCloak or just use ng-bind in your first page.
OK, please check this ?
I've got a web app where the user's can enter 'rich text' content (tinymce) and have possibly entered hyperlinks. In my angular app, I'm rendering this in a div with ng-bind-html-unsafe to preserve all formatting. I would like to attach an 'ng-click' to any an all a hrefs in that content. I created a filter that parses the content and adds the 'ng-click' text to the resulting html. I interrogated the DOM and see the ng-click="alert('test')" but there's something I'm missing where the output from the filter isn't being "wired up" (compiled).
The real answer is I needed to be doing this in a directive, not a filter. Roy's link https://stackoverflow.com/a/13405548/295797 provided the necessary guidance.
[answering own question to clear from 'unanswered' queue]