Given a string in my $scope model which contains an HTML entity, how do I ensure that the entity is properly displayed as an HTML character rather than a literal string?
HTML entity - MDN Glossary
http://plnkr.co/edit/0BliljcDkj0vvj3jdEqz?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*"
data-semver="1.2.13"
src="http://code.angularjs.org/1.2.13/angular.js"></script>
</head>
<body>
<div ng-controller="htmlChar">{{title}}</div>
<script>
angular.element(document).ready(function(){
var app=angular.module("app",[]);
app.controller("htmlChar",function($scope){
$scope.title = "© Acme";
});
angular.bootstrap(document, ['app']);
});
</script>
</body>
</html>
You do not need $sce to bind to strings with html. All you need is to inject ngSanitize into your app (it is not a core module), and then use the ng-bind-html attribute directive.
JavaScript
var app = angular.module('app', ['ngSanitize']);
app.controller('MainCtrl', function($scope) {
$scope.title = '½ Cookies & <span class="cream">Cream</span>';
});
Html
<div ng-bind-html="title"></div>
Plunkr
With $sce. You need to explicitely tell angular the content is html.
<div ng-controller="htmlChar" ng-bind-html="title"></div>
<script>
angular.element(document).ready(function(){
var app=angular.module("app",[]);
app.controller("htmlChar",function($scope, $sce){
$scope.title = $sce.trustAsHtml("© Acme");
});
angular.bootstrap(document, ['app']);
});
</script>
http://plnkr.co/edit/9iNnRC7AxFptnQZLPtYR?p=preview
Related
as you can see I have opened .xml file and parsed it to a xmlDoc. What I am trying to achieve is that this xmlDoc will be accessible from the whole script(I want to make some functions later which will be displaying elements from .xml to a screen). I searched the web and find that it is possible via global variable $rootScope but couldn't implement it correctly. I hope you guys can help me. Thanks.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<p id="title">asd</p>
<button name="opt1" ng-click="">YES</button>
<button name="opt2" ng-click="">NO</button>
<script>
var app = angular.module('myApp', []);
var parser, xmlDoc;
app.run(function($rootScope, $http) {
text = $http.get("file.xml").then(function(response) {
return response.data;
}).then(function(text) {
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("title").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
});
});
</script>
</body>
</html>
There are many ways in angular to declare and use a global variable.
examples:
1. By using $rootScope.
we need to add a dependency in our controller or service like:
app.controller('myCtrl', ['$rootScope', '$scope', function($rootScope, $scope){
$rootScope.yourVar = 'YourValue';
....
....
}]);
and then You can use this `yourVar` variable anywhere in your code.
Another way is by using angular factory or servive.
app.factory('factoryObj', ['$scope', function($scope){
let factoryObj.yourVar = 'yourValue';
return factoryObj;
}]);
Now in any controller or any other service, by using this factoryObj as a dependency and then inside that controller or service we can use factoryObj.yourVar as a variable. as:
app.controller('myCtrl',['$rootScope','$scope','factoryObj'function($rootScope,$scope, factoryObj){
console.log('factoryObj.yourVar value: ',factoryObj.yourVar);
}]);
I am new to AngularJS. I am trying to use ng-include but it does not show the html files which I refered.
app.js code
var app = angular.module('myApp', []);
app.controller('mainCtrl', [$scope, function($scope)
{
$scope.templateID = 'testing1.html';
$scope.changeTemplateID = function($scope){
$scope.templateID = 'testing2.html';
}
}]);
index.html file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<ng-include src="templateID"></ng-include>
<h1>Hello Plunker!</h1>
<p ng-click="changeTemplateID()">next</p>
</body>
</html>
There are two html file in the root directory. They are called testing1.html and testing2.html. I even tried to refer them directly like "'testing1.html'" in the ng-include.
but no success. Any help?
Two errors in your JS code:
var app = angular.module('myApp', []);
// vvvvvvvv must be a string
app.controller('mainCtrl', ['$scope', function($scope)
{
$scope.templateID = 'testing1.html';
// you don't need to pass $scope here:
$scope.changeTemplateID = function(){
$scope.templateID = 'testing2.html';
}
}]);
Plunker for your perusal.
app.controller('mainCtrl', [$scope, function($scope)...
Your [$scope must be ['$scope' like a string, change it and you'll be fine )
I'm using AngularJS for binding JS variables to my HTML content, and it works fine.
JS
var app = angular.module("Tabs", [])
.controller("TabsController", ['$scope', function($scope){
$scope.events = my_JS_object;
})
HTML
<div>{{events.test}}</div>
It works as long as my_JS_object.test is a simple string, like "Hello World", but once I try to put HTML tag in there, such as Hello <b>World</b> It doesn't use the tags as HTML elements, but as simple text. Which makes sense, only I have no idea how to make the HTML tags work.
As stated by Angular documentation, you can use inbuilt ng-bind-html directive to evaluate model string and insert resulting HTML into element.
Example:
If you have model value like:
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
Use ng-bind-html like:
<p ng-bind-html="myHTML"></p>
For detailed information go through: https://docs.angularjs.org/api/ng/directive/ngBindHtml
Note: Don't forget to inject ngSanitize service in your app.
You need to use the ngBindHtml directive that properly evaluates the expression and inserts the resulting HTML into the element in a secure way. To do this, you must include a reference to angular-sanitize.js in your HTML and then in your angular module, inject ngSanitize.
Like so
var app = angular.module("Tabs", ['ngSanitize'])
.controller("TabsController", ['$scope', function($scope){
$scope.events = my_JS_object;
})
<div ng-controller="TabsController">
<div ng-bind-html="events.test"></div>
</div>
Here is a full working example:
(function(angular) {
'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myHTML = 'Hello This is <b>BOLD<b/>';
}]);
})(window.angular);
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-sanitize.js"></script>
</head>
<body ng-app="bindHtmlExample">
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
</body>
Refer to the official angular documentation for details:
https://docs.angularjs.org/api/ng/directive/ngBindHtml
If you want to insert HTML into page you shouldn't do it this way.
There is sanitize for this task.
For example in your controller:
$scope.trustedHtml = "<b>Hello World</b>"
And in your html:
<div ng-bind-html="trustedHtml "></div>
Always check html if using a user given text before inserting.
Also don't forget to add ngSanitize as dependency while creating controller
It's easier to use transclusion if you want to embed custom HTML into your DOM tree.
angular.module('myApp', [])
.controller('MainCtrl', function ($scope) {
$scope.overwrite = false;
$scope.origin = 'parent controller';
})
.directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: 'my-directive.html',
scope: {},
transclude: true,
link: function (scope) {
scope.overwrite = !!scope.origin;
scope.origin = 'link function';
}
};
});
<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<my-directive>
<p>HTML template</p>
<p>Scope from {{origin}}</p>
<p>Overwritten? {{overwrite}}</p>
</my-directive>
</div>
<script type="text/ng-template" id="my-directive.html">
<ng-transclude></ng-transclude>
<hr />
<p>Directive template</p>
<p>Scope from {{origin}}</p>
<p>Overwritten? {{overwrite}}</p>
</script>
</div>
HTML
<section ng-app="app">
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
JS
var app = angular.module('app', [])
.controller('VoicemailsCtrl', ['$scope', VoicemailsCtrl]);
function VoicemailsCtrl($scope, $http)
{
$scope.vms = [1,2,3];
$scope.test = 'this is a test';
}
Can be seen at:
http://jsfiddle.net/tx9nbo8g/6/
You missed adding
ng-app="app"
in the section.
Check the updated fiddle
Fiddle
Apart from this you need to add
angular 1.2.1
and
No wrap in head
in framework and extension.
.
Please find below working code :
Html:
<body ng-app="app">
<section>
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
</body>
Js:
var app = angular.module('app', []);
app.controller('VoicemailsCtrl', ['$scope','$http',VoicemailsCtrl]); //You forgot to add $http
function VoicemailsCtrl($scope, $http) {
$scope.vms = [1,2,3];
$scope.test = 'this is a test';
}
http://plnkr.co/edit/qCsG4WzFc0Irt2RobLoC?p=preview
Add ng-app="app" on section element & also you need to change the script loading option inside your fiddle from OnLoad to No Wrap in <head/>
Markup
<section ng-app="app">
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
Working Fiddle
Your HTML should have to be changed. You need to tell angular where app is starting. Default ng-app is also a valid app declaration.
<section ng-app="MyApp">
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
In controller
angular.module('MyApp', [])
.controller('VoicemailsCtrl', ['$scope', function ($scope){
$scope.vms = [1,2,3];
$scope.test = 'this is a test';
}]);
fiddle
You should not use global declaration of controller. Its been deprecated in angular 1.3+ versions. You should use controller directive to declare a controller.
Searched far and wide, most of the answers were "you forgot to include your controller".
"Error: [ng:areq] Argument 'AdamState' is not a function, got undefined"
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="">
<div ng-controller="AdamState">
</div>
</body>
</html>
JS:
function AdamState($scope, $http) {
$scope.test = 1;
}
Also, when calling that function from the console it will be called.
Angular 1.3+ global controller functions are turned off.
So you need to bind your controller to module,
Controller
var app = angular.module('app',[])
app.controller('AdamState',[`$scope`, `$http`, AdamState])
function AdamState($scope, $http) {
$scope.test = 1;
}
Or you need to declare controller as global controller then do allow global controller function manually form app.config() that is in angular config phase, the below code will make your code working.
CODE
app.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Thanks.
You miss lots of code there, this should eventually help you get started:
var myApp = angular.module("myApp", []);
myApp.controller("AdamStateCtrl", function($scope) {
$scope.test = 1;
});
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="AdamStateCtrl">
{{test}}
</div>
</body>
</html>