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
Related
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/
I have an element with ng-html-bind that loads HTML content:
<p ng-bind-html="content.body"></p>
Inside this content I have one or more <code> blocks.
I would like to apply syntax highlighting only to the code tags of the loaded content, for example using angular-highlightjs directive.
Any idea on how to achieve this?
There are many ways to bind html on the page with Angular. One way is with ng-bind-html, but it's not really the best for this use case, since you also need angular-highlightjs directive to compile. You can achieve your goal with $compile like this:
/** Here, you will need to do some transformations to your html string
* 1. Add `hljs` attribute or `class="hljs"` to the `<code>` tag in any `<pre><code>`
* 2. Hopefully you already have your line breaks in place. This will result in
* a single line code block otherwise. See my plunk for how I added '\n'
*/
var myHTML = $scope.content.body;
element.append( $compile( myHTML )($scope) );
See my plunk
When I use custom directives of angular, the html page fails in w3 validation. Help me to overcome this issue.
Eg:
<div>
<share-news news-title="{{...}}" news-content="{{...}}"></share-news>
</div>
When I use the above code,
I am getting the error like
Element share-news not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
While the initial source of the page body (before angular processes an ng-app element) may not adhere to the W3C standards, if you use "replace: true" in directives, custom elements are replaced by a template HTML, which can be valid. So, in this case, you can think about an angular element as just a placeholder that is replaced with the terminal HTML output.
I'm using pagination (angular/ui.bootstrap) for my list. The pagination control shows on my site but in VS it says "Unknown element 'pagination' or element cannot be placed here". http://i.imgur.com/CRbTfBZ.png
I've placed the pagination tag right after my table (ng-repeat), and inside my ng-controller div.
I'm using thsese cdns
ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js
angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js
netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
EDIT: Dont know why, but it works even if VS throws an warning.
Because that is Angular Custom Directive, so VS will think that it's not a valid element.
Looking at the angular-ui source code, pagination accept restrict 'EA'. So if you really don't want to see the warning, you can try to do something like this :
<div data-pagination></div>
For more info about restrict option:
https://docs.angularjs.org/guide/directive
Image not showing in ng-repeat, getting all data from indexeddb and binding to page everything show up expect img in blackberry 10 webworks
<img data-ng-src='{{item.Picture}}' width="100px;" height="100px;"/>
{
id:48758,
Botanical_name:"Cladothamnus pyroliflorus",
Common_name:"Himalayan Cotoneaster ",
Picture: "images/Fplants/Cladothamnus pyroliflorus.png",
},...
This wouldn't seem like an issue with IndexedDB.
For non-Angular directive attributes, such as src you want to interpolate as in the code below:
<img src='{{item.Picture}}' width="100px;" height="100px;"/>
For Angular directive attributes, there's no need for such interpolation:
<img data-ng-src='item.Picture' width="100px;" height="100px;"/>
As your data is going to be undefined on bootstrap, you want to use the latter approach. It prevents the browser from trying to load undefined as an image source.
Also, please note vaibhav's comment above. Without a leading slash, you'll load the images directory as relative to the current. While that may be what you're going for, it's probably going to make your code more reusable to include the leading slash regardless.
Update: If you're in an ng-repeat, note that your scope is not the scope in which the ng-repeat directive appears but it's own, brand new scope. Perhaps try out $parent.item.Picture
I'm having the same problem, it occurs with the image filename having spaces in between , maybe we could write a directive the removes the space from the filename as I'm calling the image via other variable such as title..
app.config(['$routeProvider','$compileProvider',function($routeProvider, $compileProvider){ $compileProvider.imgSrcSanitizationWhitelist('img/');