<body ng-controller="MainController as mainCtrl" ng-app="MyApp">
<div header page="'Test'" ></div>
<div id="main" class="app-body" ng-controller="MyController as ctrl">
<my-grid-list></my-grid-list>
</div>
</body>
I am trying to figure out how the header is constructed. I expect it to be something like
<header-bar></header-bar>. However, it gives header. Is it an attribute or some dialect of AngularJS syntax? This is AngularJS.
The header attribute is not a core directive in AngularJS. It could be a custom directive. Check the code for the app to see if it is defined there.
I found this.
MyApp.directive('header', function () {.
// ...
})
That is indeed a custom directive.
For more information, see
AngularJS Developer Guide - Creating Custom Directives
Related
I've been using W3Schools' Javascript library to handle HTML includes onto other HTML pages. Everything has been going good, except I'm running into some formatting issues. When the include processes, it puts the HTML into the body tag when I'd prefer it into a different tag. I don't want my body tag formatting to impact the HTML content that's imported. I'm open to any solutions, but I'd prefer something that allows me to specify a specific tag in the HTML document to be imported into.
I've tried putting the Javascript call into the head or outside of the body tag but haven't had any luck.
Here's the code used by W3Schools: https://www.w3schools.com/howto/howto_html_include.asp
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- import header -->
<div w3-include-HTML="./includes/header.html"></div>
<!-- import navigation bar -->
<div w3-include-HTML="./includes/navbar.html"></div>
<!-- Script to Handle W3Schools HTML Includes -->
<script>
w3.includeHTML();
</script>
Thanks for the help! I'm hoping there's a good way to do this, otherwise I guess I can format my text outside of the body tag... That's far from ideal though.
Did you try to replace <script> w3.includeHTML(); </script> by <script>includeHTML(); </script> ?
Using AngularJS 1.x, I used to do code like this to include static HTML content on a page:
...
<body>
<!-- Banner -->
<ng-include src="'banner.html'"></ng-include>
<!-- Navigational thumb -->
<div>
<div>
<ng-include src="'navbar.html'"></ng-include>
</div>
...
I would like to know how to do that in React (where I'm a total beginner).
React use another way to render Html as Ang, you should create dump component to render some html and include it where you need.
https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html - also check it.
I've recently started using the <template> tag for HTML that I process afterwards using a template library, e.g.
<template id="tmpl">
<div class="something">
{{title}}
</div>
</template>
...
<script>
var output = Mustache.render($('#tmpl').html(), {
link: 'abc',
title: 'abc'
});
</script>
However, I've come to realise this means I have a broken link (example.com/pages/{{link}}) in my HTML. This is a concern, as various crawlers might consider it invalid (in fact, the Google Search Console reports my homepage as having a broken link).
Is it valid to use <template> this way?
Is it better to put it in something like <script type="text/template"> instead (as seen on the handlebars.js website)?
The output variable does contain the HTML we would expect, i.e., the rendered template; however, your code does not write the contents of the output variable anywhere.
Here is a working example:
<template id="tmpl">
<div class="something">
{{title}}
</div>
</template>
<span id="output"></span>
<script>
var output = Mustache.render($('#tmpl').html(), {
link: 'abc',
title: 'abc'
});
$('#output').html(output);
</script>
Google has not properly crawled the test site I setup for this. However, when I asked GoogleBot to render my version of your code it displayed the link inside the template element, i.e., *{{title}}* and the rendered template link, i.e., *abc*. Even though Google says you have a broken link in the template element, you really don't when a user views it.
One possible way to get Google to quit indicating that you have a broken link is to surround your template tags with <!--googleoff: anchor--> ...templates... <!--googleon: anchor-->. These tags stop googlebot from indexing anchor tags contained within.
Example:
<!--googleoff: anchor-->
<template id="tmpl">
<div class="something">
{{title}}
</div>
</template>
<!--googleon: anchor-->
I am trying to display the html tags from the data in the view.I have a data level which is $scope.level="<b>i should be bold</b>" and when the data is given in the template as given below should respect the html tag as well
<div ng-controller="MyCtrl" >
{{level}}
</div>
that is it should be bold without using
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<b>{{level}}</b>
</div>
But with what i have tried so far i am not able to achive it.It is also showing the tag in the view.The issue is illustrated in this JSFiddle Here.
Is there anyway to achieve it.or am i totally wrong here?
You can use the ngBindHtml directive which evaluates the expression and inserts the resulting HTML into the element. Don't forget to include the ngSanitize directive.
https://docs.angularjs.org/api/ng/directive/ngBindHtml
Example :
app.js
angular.module('app', ['ngSanitize'])
.controller('Controller', function($scope) {
$scope.data = '<b>my text</b>'
});
index.html
<div ng-controller="Controller">
<p ng-bind-html="data"></p>
</div>
You can use ng-bind-html-unsafe:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<div ng-bind-html-unsafe="level"></div>
</div>
Unsafe because the DOM should generally not be modified inside a controller.
Why can't you move the <b> tags to the markup and then just interpolate the value of 'level'?
http://jsfiddle.net/u37xtpjd/2/
You can accomplish this using the ng-bind-html directive:
<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<span ng-bind-html="level"></span>
</div>
I use an editor to add comment and this content save as html in db. When I want to display it in page all html elements appear in out put. So I want to use this code to solve my problem but not solve it.
Here is my code
Data include {body, name, date} that body save as html
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html-unsafe="d.body">
<p>{{d.body}}</p>
</div>
</div>
</div>
In jsfiddle inside an question is using angular 1.1 in which ng-bind-html-unsafe is working.
But currently angular has deprecated ng-bind-html-unsafe from latest version, instead you need to use ng-bind-html then sanitize that url from the angular filter using $sce service and $sce.trustedAsHtml()
Filter
app.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
HTML
<div ng-repeat="d in Data">
<div class='content'>
<div ng-bind-html="d.body | sanitize">
<p>{{d.body}}</p>
</div>
</div>
</div>
For more info refer this SO answer