The Output in the inspect element:
<div ng-bind-html="job.description" class="ng-binding">
"<p><strong>Our Responsibilities</strong></p>"
</div>
This is my HTML code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.3.20/angular-sanitize.min.js"></script>
var myApp = angular.module('rivigoApp', ['ngSanitize']);
<div ng-bind-html="job.description"></div>
How do I do to make it compile the HTML in the output? I believe the main issue is with the quotes "" but I'm unable to figure out how to proceed. I've tried using various other methods.
inject $sce Service in your controller and use it like below
app.controller('mainCtrl',function($sce , $scope){
$scope.job = {
description : $sce.trustAsHtml("<p><strong>Our Responsibilities</strong></p>")
};
})
$sce Reference
Related
Only the html output and the {{10 + 10}} of the web page is rendered. I'm not sure what what I'm doing wrong but I'm guessing it's some setup type issue in my visual studio project.
(function () {
var app = angular.module("ShipmentsHome", []);
var EditShipmentsController = function ($scope) {
$scope.message = "--Still need to create grid here--";
};
app.controller("EditShipmentsController", ["$scope", EditShipmentsController]);
}());
!DOCTYPE html>
<html>
<head>
<title>Shipments Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="../../lib/home.js"></script>
</head>
<body ng-app="ShipmentsHome" ng-controller="EditShipmentsController">
<h1>Product Transfers</h1>
<p>Create or modify a transfer below:</p>
<div> {{message}}</div>
<p>look above for message from controller</p>
<h2>{{10 + 10}}</h2>
</body>
</html>
I am not seeing any errors in the console. Below is what I am seeing:
Probably the problem will be with your relative path. I got it working when I replace the script source with the actual controller script. please check your path and correct it.
Issue was the project I was working with was setup to use .ts files and not .js files. I needed to create the project to work with angularjs not typescript.
I am not getting the expected message when using value recipe.
I am getting output as {{message}}, but I am expecting "hai services are working!!"
Please share where I am going wrong.
HTML code: Injector.html
<!DOCTYPE html>
<html>
<head>
<title>Practicing Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="Injector.js"></script> <!-- Injector module file name -->
</head>
<body ng-app="injectormodule"> <!-- root module-->
<div ng-controller="controllerInjector">
{{message}}
<!-- controller name-->
</div>
</body>
</html>
Controller: Injector.js
var app = angular.module("injectormodule", ["servicemodule"])//name of service is servicemodule
.controller("controllerInjector", ["$scope", "message", function($scope, message){
$scope.message = message;
}]);
Service:(Value Recipe)
var myapp = angular.module("servicemodule", [])
.value("message", "hai services are working!!");
You have to define your servicemodule before your injectormodule, otherwise its creation will fail (since unable to find the servicemodule dependence).
Since the injectormodule failed from being created, the ng-app="injectormodule" will also be unable to bootstrap Angular on your DOM, thus won't interpret things like double brackets ({{ message }}).
Here is a working codepen.
You need to Inject your service into controller and need to create same module.
See this sample working fiddle which use service method to get text.
See other fiddle link also in comments
I checked for answers in SO but couldn't find satisfying answer. So here I'm asking :
I have a string as follow
var string = "With this you have agreed with the <a href='#'>rules and condition</a>"
Which I need to render as both string (for the text portion) and HTML (for the HTML portion).
How do I achieve this in AngularJs? I tried with $compile but it didn't work for me, it output chunks of seemingly minified code on the page.
You can do this using ng-bind-html,
angular.module('myapp', ['ngSanitize'])
.controller('foo', function($scope) {
$scope.bar = "With this you have agreed with the <a href='#'>rules and condition</a>";
});
<div ng-controller="foo">
<div ng-bind-html="bar"></div>
</div>
DEMO
You can use ng-bind-html directive as below. To use this, you have to include ngSanitize module and related js file.
var app = angular.module('app', ['ngSanitize']);
app.controller('TestController', function($scope) {
$scope.string = 'With this you have agreed with the rules and condition';
});
angular.bootstrap(document, ['app']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.min.js"></script>
<div ng-controller="TestController">
<span ng-bind-html="string"></span>
</div>
<html>
<div
ng-bind-html="myHTML">
...
</div>
<html>
Ng Code :
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
}]);
Download sanitize.js from here
AngularJS
$scope.string = "With this you have agreed with the <a href='#'>rules and condition</a>"
HTML
<div ng-bind-html="string"> </div>
I am trying to build a simple web app that communicates with an external API , for the first step i wish to check if my controller,service-html integration is all in placed , so I'm tying to bind a simple variable from the controller to the view, but i am getting {{msg}} instead of a successful bind.
please ignore the service for now its just my fundumentals for later on.
main.html :
<!DOCTYPE html>
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="controller.js"></script>
<head></head>
<body ng-app="queueApi" ng-controller="MainController">
<div>
<h1>{{msg}}</h1>
</div>
</body>
</html>
queueservice.js
angular.module('queueApi')
.factory('queueService', function ($resource){
return $resource('http://127.0.0.1:8080/queue/:id',{id: '#id'});
});
controller.js
var app = angular.module('queueApi' , ['ngResource']);
app.controller('MainController', function($scope,$http, queueService){
$scope.msg = "Hi tom";
// $scope.items = queueService.query({id:2}); //getting all from id 2
});
If you look at your console you can see the error in module creation. It is because the ngResource module is in external source file rather than angular.min.js. Add also the angular-resource.js.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.min.js"></script>
<script src="controller.js"></script>
In addition to Hamlet Hakobyan's answer, you must ensure that your modules have been included in correct order. With your code structure controller.js should precede queueservice.js.
From the documentation:
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
I'm building my first AngularJS dynamic form, built based on information received from a JSON file using AngularJS directive.
Everything works, my issue is that the JSON code is getting displayed while the page is loaded - once the page is loaded the JSON code disappears.
Am I doing something wrong?
Check http://plnkr.co/edit/v4jOwuF6jmZfORlNbvIB?p=preview to see the behavior, click on "Stop"/"Start" multiple times to see the behavior.
HTML code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ViewCtrl">
<div ng-repeat="page in form.form_pages">
<div ng-repeat="field in page.page_fields" class="form-group">
<field-directive field="field" ng-form="subForm"></field-directive>
</div>
</div>
</body>
js code:
'use strict';
angular.module('myApp',[])
.controller('ViewCtrl', ['$scope', function($scope) {
var jsonStr='{"form_id":"1","form_name":"My Test Form","form_pages":{"1":{"page_id":1,"page_title":"My First Tab","page_hide":false,"page_fields":{"1":{"field_id":1,"field_title":"First Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"2":{"field_id":2,"field_title":"Last Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"3":{"field_id":3,"field_title":"Gender","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false},"4":{"field_id":4,"field_title":"Email Address","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"5":{"field_id":5,"field_title":"Password","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"6":{"field_id":6,"field_title":"Birth Date","field_type":"textfield","field_value":"1981-01-10T06:00:00.000Z","field_required":true,"field_disabled":false},"7":{"field_id":7,"field_title":"Your browser","field_type":"textfield","field_value":"2","field_required":false,"field_disabled":false},"8":{"field_id":8,"field_title":"Additional Comments","field_type":"textarea","field_value":"","field_required":true,"field_disabled":false},"9":{"field_id":9,"field_title":"I accept the terms and conditions.","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false}}}}}';
$scope.form = JSON.parse(jsonStr);
}])
.directive('fieldDirective',function($http, $compile) {
var linker = function(scope, element) {
// GET template content from path
var templateUrl = "textfield.html";
$http.get(templateUrl).success(function(data) {
element.html(data);
$compile(element.contents())(scope);
});
}
return {
template: '<div>{{field}}</div>',
restrict: 'E',
scope: {
field: '='
},
link: linker
};
})
textfield.html - the html template:
<div class="row" ng-form="subForm" ng-class="{'has-success': subForm[field.field_id].$invalid}">
<div class="col-sm-5">{{field.field_title}}:</div>
<div class="col-sm-7">
<input type="text"
placeholder="{{field.field_title}}"
ng-model="field.field_value"
value="{{field.field_value}}"
ng-required="field.field_required"
ng-disabled="field.field_disabled"
class="form-control"
id = "{{field.field_id}}"
name = "{{field.field_id}}" >
<div ng-show="subForm[field.field_id].$touched && subForm[field.field_id].$error && subForm[field.field_id].$invalid">Field '{{field.field_title}}'
<span ng-show="subForm[field.field_id].$error.required"> is required.</span>
</div>
</div>
</div>
Thank you.
http://plnkr.co/edit/YC9p0UluhHyEgAjA4D8R?p=preview
Basically instead of adding the loaded template into the element then compiling it in place I just compile the string then insert the compiled element directly
element.append($compile(data)(scope));
Seems you can still see a delay but this might be the async loading of the template causing that, would need to debug in the network panel and do some profiling or logging to see exactly what's going on.
Edit
Made a fork of the plnkr to show one with the template inlined so there's no delay fetching it with $http http://plnkr.co/edit/Tnc3VOeI8cELDJDHYPTO?p=preview instead just grabbing it synchronously from the template cache and using ng-template in a script block to have it loaded in advance.