I'm able to display pound successfully in the following example if I use the pound symbol directly in the JSON data. How can I tell angular that I want to display Misko got £?
(function(angular) {
'use strict';
angular.module('oneTimeBidingExampleApp', []).
controller('EventController', ['$scope', function($scope) {
var counter = 0;
var names = ['Igor got �', 'Misko got £', 'Chirayu got £'];
/*
* expose the event object to the scope
*/
$scope.clickMe = function(clickEvent) {
$scope.name = names[counter % names.length];
counter++;
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example28-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="oneTimeBidingExampleApp">
<div ng-controller="EventController">
<button ng-click="clickMe($event)">Click Me</button>
<p id="one-time-binding-example">One time binding: {{::name}}</p>
<p id="normal-binding-example">Normal binding: {{name}}</p>
</div>
</body>
</html>
Add ngSanitize as a dependency to your module. Also include the below script in your HTML.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.min.js"></script>
angular.module('oneTimeBidingExampleApp', ['ngSanitize'])
In your html use the ng-bind-html so that angular will display it as HTML instead of plain text
<p id="normal-binding-example">Normal binding: <span ng-bind-html="name"></span></p>
Angular is escaping / sanitizing by default but you can use the ng-bind-html directive with sth like this to display html:
<div ng-bind-html="'Misko got £'"></div>
or
<div ng-bind-html="name"></div>
more info: https://docs.angularjs.org/api/ngSanitize/service/$sanitize
Related
I am trying to add more than one ng-app in a application ,how to register the both ng-app and let me know what is the use of using more than one ng-app?
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
var app1 = angular.module('app1', []);
app1.controller('Ctrl1', function ($scope)
{
$scope.name = "Angular";
});
var app2 = angular.module('app2', []);
app2.controller('Ctrl2', function ($scope)
{
$scope.name = "Developer";
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="app1">
<div ng-controller="Ctrl1">
<span>{{name}}</span>
</div>
</div>
<div id="app2">
<div ng-controller="Ctrl2">
<span>{{name}}</span>
</div>
</div>
</body>
</html>
trying to show the data inside post.specials with HTML characters. I want to display 'ö' instead of ö
ngSanitize and ng-bind-html should do the trick? I'm doing something wrong here
<script>
function LunchBox($scope, $http) {
var url = "yahoo.com/api/callback=JSON_CALLBACK";
$http.jsonp(url).
success(function(data) {
$scope.posts = data;
}).
error(function(data) {
});
};
angular.module('LunchBox', ['ngSanitize'], ['ui.bootstrap']);
</script>
<!doctype html>
<html ng-app id="ng-app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Lunchmenu</h1>
<div id="LunchContainer" ng-app ng-controller="LunchBox">
<div ng-repeat="post in posts | orderBy:['name']" class='postBody'>
<h2>{{post.name}}</h2>
<p ng-repeat="special in post.specials" ng-bind-html="post.specials" class="postDetail"></p>
</div>
</div>
</body>
</html>
From Angular docs: ngBindHtml
You may also bypass sanitization for values you know are safe. To do
so, bind to an explicitly trusted value via $sce.trustAsHtml. See the
example under Strict Contextual Escaping (SCE).
In your controller, inject $sce and add:
$scope.displaySpecial = function(html)
{
return $sce.trustAsHtml(html);
};
Then change your view code to:
<p ng-repeat="special in post.specials"
ng-bind-html="displaySpecial(special)" class="postDetail">
</p>
I have written a simple sample custom angular directive and added the directive twice in the HTML.
Below is the sample.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script>
var myDirectives = angular.module('myDirectives', []);
myDirectives.directive('rkitem', function () {
return {
restrict: 'E',
template: '<h4> template text </h4>'
}
});
var myApp = angular.module('myApp', ['myDirectives']);
var ctrl = function ($scope) {
$scope.fname = 'test';
}
myApp.controller('ctrl', ctrl);
</script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="ctrl">
<div class="row">
<rkitem />
<rkitem />
</div>
</div>
</body>
</html>
Expected Output : template text should be displayed twice as rkitem element mentioned twice in HTML
Acutal Output : template text is getting displayed only once
Can anyone please explain why it is getting displayed only once and not twice.
You should add closing tags to your directive elements:
<div class="row">
<rkitem></rkitem>
<rkitem></rkitem>
</div>
I have the following html:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS</title>
<script type="text/javascript" src="/javascripts/app.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
<div ng-controller="SecondController">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</body>
</html>
and the following coffeescript:
window.myApp = angular.module 'myApp', []
myApp.factory 'Data', ->
return message : 'I am data from a factory'
myApp.controller 'FirstController', ($scope, Data) ->
$scope.data = Data
myApp.controller 'SecondController', ($scope, Data) ->
$scope.data = Data
When I run the app, it prints out {{data.message}} instead of the text I type in the input box. When I remove the module dependency from the html and get data from a parent within the div, it works fine. This leads me to believe that the module is not getting created. What is the problem with my code?
You need to put the script tag that's in the head after the library script.
My templates contain JS, as they are called JS is not executed, you have an idea please.
For example in my JS file script.js, i have methods that apply to HTML elements in my templtes and it does not work, an idea please.
Example :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body ng-app>
<ng-include src="'header.html'"></ng-include>
<script src="angular.js"></script>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
header.html
<div id="header">
<div id="logo">AngularJs</div>
<div id="nav"></div>
</div>
script.js
$(document).ready(function(){
$('#nav').html('<ul><li><a href="">Link<a></li></ul>');
});
The script execute well, I feel it does not find the element div#nav.
The solution provided by Youssef can be made "more Angular", and it will not require jQuery:
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
<p ng-class="color">Content of template2.html</p>
</script>
$scope.myFunction = function() {
$scope.color = 'red';
}
http://jsfiddle.net/mrajcok/MfHa6/
In the Angular world, we try to change model properties (e.g., $scope.color) and let the view update automatically. We try to not look up elements by ID or jQuery selectors, and we try to avoid DOM manipulation in the controller -- e.g., $('#tpl2').addClass('red');
Sorry, I read wrong a part of your question, my mistake.
The DOM ready statement of jQuery will probably not work correctly. What you can do is on your ngInclude tag add a onload="FUNCTION_NAME" that contains the DOM edition you indicated inside the script.js
For more information have a look at the documentation here: http://code.angularjs.org/1.0.1/docs-1.0.1/api/ng.directive:ngInclude
--- Old Post ---
#YoussefElMontaser, you don't have to put the quotes on the ngInclude:
<ng-include src="header.html"></ng-include>
probably that is what is wrong with your script not going forward.
Let me know if that worked.
I found the solution:
http://jsfiddle.net/esjeY/
HTML
<div ng-app="">
<div ng-controller="Ctrl">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
</div>
<div ng-include src="template.url" onload='myFunction()'></div>
</div>
JS
function Ctrl($scope) {
$scope.templates = [{
name: 'template1.html',
url: 'template1.html'
}, {
name: 'template2.html',
url: 'template2.html'
}];
$scope.template = $scope.templates[0];
$scope.myFunction = function() {
$('#tpl2').addClass('red');
}
}
#guiligan : Thanks for your help.