I am using the following version of Angularjs and trying to bind property called Description, that containing html tags, with my template.
I tried to use
{{Description | unsafe}} -- rendering html as string
ng-bind-html-unsafe -- nothing rendering
ng-bind-html -- nothing rendering
Files:
<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular.min.js"></script>
<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular-route.js"></script>
How html string can be rendered as html?
Make use of $sce service. Inject $sce to your controller & then use trustAsHtml method. In controller add code as:
$scope.desc = $sce.trustAsHtml($scope.Description);
Where $scope.Description is a string containing html tags
Then, bind on template with ng-bind-html :
<div ng-bind-html="desc"></div>
For ng-bind-html to work as expected, you need to include angular-sanitize library and ngSanitize as a dependency injection.
Sharing here an example for the same. Hope, this helps.
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
Related
I am currently working on a Node project using Express and ejs as view engine.
Now, for some purposes, I want to put some Angularjs on the project but I encountered some issues.
None of the scripts I write on the Angularjs controller are executed though they are correctly loaded.
For example, I initiate the angular module like so in a file app.js
angular.module('myApp', [])
.controller('MainController', MainController);
then I load it in a rendered ejs file index.ejs
<body ng-app="myApp">
<div>{{ variable }}</div>
<script src="/public/js/angular.min.js"></script>
<script src="/public/modules/part.js"></script>
<script scr="/public/modules/app.js"></script>
</body>
where /public is a the static directory for serving static files and part.js the file containing the MainController defined as following
var MainController = function($scope) {
$scope.variable = 'text';
console.log('other text');
}
When the page is completely loaded, nothing in the console and the {{ variable }} isn't interpreted.
So what have I done wrong?
You need to add ng-controller="MainController" as well,
<body ng-app="myApp" ng-controller="MainController">
<div>{{ variable }}</div>
</body>
I am developing a web application. In my application, I am using Angular JS. I am new to Angular JS. But now I am having a problem my declaring controller. Here is my code.
<html>
<head>
//files references
</head>
<script>
var app = angular.module('memeApp',['ngRoute','ui.bootstrap']);
</script>
<nav class="nav-bar">
Home
Account
</nav>
<div class="content" ng-app="memeApp" ng-controller="DefaultController">
//content
</div>
</div>
</body>
</html>
As you can see I did nothing yet. I declare a controller named DefaultController. So when I check log, it is giving me following error:
So my controller is totally not working. When I add js code for controller as well. If I removed controller directive, errors gone. Why is my controller not working?
You need to define a controller function 'DefaultController' before you use it in html div tag.
Add below code in your script tag.
app.controller('DefaultController', ['$scope', function($scope){
}]);
You need to define your controller somewhere and add it as a dependency to the app first.
Example:
angular.module('app.controllers', [])
.controller('DefaultController' function() {
//do stuff
};
and in your app definition:
var app = angular.module('memeApp',['ngRoute','ui.bootstrap', 'app.controllers']);
I have injection problem. I have no idea why my html is not rendering.
Render HTML in the view; it should be processed/created in the controller, and then rendered in the html view.
This code is currently not working as the html appears as text:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', myController);
myController.$inject = ['$scope']
function myController($scope) {
$scope.html = "<b>HTML inserted</b>";
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-controller="MyCtrl as vm">
<div>Html</div>
<div>{{html}}</div>
<br/>
</div>
For rendering of html in angular try the ng-bind-html attribute.
In your case:
<div ng-bind-html="html"></div>
More info:
ngBindHtml in AngularJS
Edit: Also add ngSanitize dependence:
ngSanitize
try adding 'ngSanitize' in your module dependencies if you're using ng-bind-html
Hello I want to print content from an array of objects using angular js. I know that there are a lot of questions like this but there isn't any case where the same problem occurs. I want to print an attribute of an object as html. I use ng-sanitize as seen in many examples and it works fine though i get an error in console.
Here my test case:
<body ng-controller="myCtrl">
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
<script>
var app = angular.module("MainCtrl", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
</script>
which works fine and print the elements as it should but in the console i get this error:
TypeError: c.push is not a function
at Function.K.$$addBindingInfo (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:78:223)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:252:330
at ea (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293)
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
at k (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:281:253 <div ng-bind-html="widget.content" class="ng-binding">
I use angular 1.4.8
Do you have any ideas why this error occurs or how to solve it?
Thx in advance
I forked your plunkr to show the problem you are encountering.
Whenever you use angular modules like ngRoute or ngSantize, it is important that the version of the module match exactly to the version of the angular library. In your case, you were using angular 1.4.8, but angular ngSanitize 1.0.3.
Updating the code to the proper version of ngSanitize from the CDN (and using angular.js instead of angular.min.js for debugging) shows that the error does not occur with ng-bind-html.
Use correct Versions for .js files... here is the code.... This is running perfectly
this is index.html
<html ng-app = "myapp">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body ng-controller = "myController">
<h1>Welcome to the Angular</h1>
{{4/3}}
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
</html>
and this is test.js
var app1 = angular.module('myapp',['ngSanitize']);
app1.controller("myController" , function($scope){
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
save these two files in one folder and run.. it gives output perfectly
Found the bug, don't use ng-bind-html, that causes the issue.
Use single angular expression inside your html and it'll just work.
However I don't know what causes the issue.
Plunkr: http://plnkr.co/edit/xiSGVIPXb27GcKRh9yR1
I have this problem, that it would be easier for me to inject some configuration to my Angular app from html. What I'm thinking about is something like:
In HTML:
<body ng-app="MyApp" my-config="ABC">
</body>
So later I could convert it to a constant, so I can easier reuse the value across rest of the app. Something like:
angular
.module('MyApp', [])
.constant('MY_CONFIG', /** the value would become what was set in HTML */);
Would something like that be possible? Thanks for your help!
I've solved that differently. In the end of my <body>, after all js files are loaded I'm just setting the value:
<body ng-app="MyApp">
<!-- [...] -->
<script>
angular
.module('MyApp')
.constant('MY_CONFIG', 'testing.config');
</script>
</body>