I have fetched json webservice one of its field contain HTML tags
actually web service has < & > my code looks like
angular.module('starter.controllers', ['ionic','ngSanitize'])
.controller('DashCtrl', function($scope) {})
.controller('DetailCtrl', ['$sce','$scope', '$stateParams','Chats',function($sce,$scope, $stateParams, Chats) {
$scope.exe = Chats.detail($stateParams.exeId,$stateParams.sub_exeId);
$scope.renderHtml = function(html_code)
{
return $sce.trustAsHtml(html_code);
};
}])
//also tried the following filter
.filter('to_trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}])
at my view I tried the following variations
<p ng-bind-html="exe.tips.replace('<','<').replace('>','>') | to_trusted"></p>
<p ng-bind-html="exe.tips | to_trusted"></p>
<p ng-bind-html="exe.tips"></p>
<p ng-bind-html="renderHtml(exe.tips)"></p>
and tried many other thing but still getting rendered the HTML
at view source it is like this <p>"<ol><li>text</li>....
Related
var app = angular.module('pixmall', []);
app.controller('myDashboard', function($scope, $http) {
app.filter('myRandom', function() {
return function (input) {
return Math.round(input);
}
});
<div ng-app="pixmall" ng-controller="myDashboard">
<span>{{30.35 | myRandom}}</span>
</div>
I want to use the filter to round the number to the nearest whole number but it is not working, I don't know what is wrong
Separate out the controller and filter, you should not place the filter within the controller code.
DEMO
var app = angular.module('pixmall', [])
app.controller("myDashboard",function($scope){
});
app.filter('myRandom', function() {
return function (input) {
return Math.round(input);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
<div ng-app="pixmall" ng-controller="myDashboard">
<span>{{30.35 | myRandom}}</span>
</div>
i'm using an API to get my posts of my blog. But i'm getting the content that's a HTML code but i'm trying to see it as i saw in the blog but aren't working.
I had tried it using this filter and functions:
.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
})
And in controller:
function htmlDecode(input){
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes[0].nodeValue;
}
In the template:
<div ng-bind-html="post.conteudo | unsafe"></div>
But this codes aren't making this work properly. As result of this, i get a raw/plain text like this:
What can i do?
You are overcomplicating things. You don't need this filter, as well as htmlDecode function. All you need is $sce.trustAsHtml:
$scope.post.conteudo = $sce.trustAsHtml('<b>Thomas Mann</b>');
and in HTML:
<div ng-bind-html="post.conteudo"></div>
angular.module('demo', []).controller('DemoController', function($scope, $sce) {
$scope.post = {}
$scope.post.conteudo = $sce.trustAsHtml('<b>Thomas Mann</b>')
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoController">
<div ng-bind-html="post.conteudo"></div>
</div>
I'm new to angular and I'm wondering how I can share a variable between controllers in angular. I'm using the following scripts -
In Main.js:
function MainCntl($scope) {
---code
}
function SearchCtrl($scope, $http) {
$scope.url = 'http://10.0.0.13:9000/processAdHoc';
$scope.errorM = "No results";
$scope.search = function() {
$http.post($scope.url, { "data" : $scope.keywords}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
$scope.result = data;
alert('yes');
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
alert('no');
$scope.result = "failed";
});
};
}
In Index.html
<body ng-controller="MainCntl" >
---code
<div ng-controller="SearchCtrl">
<form class="well form-search">
<div class="ui-widget">
<label for="tags"></label>
<a ng-click="search()"><input type="image" src="../../images/search1.png" class="searchbox_submit" /></a>
<input ng-model="keywords" placeholder="Shadow Search" id="tags" class="input-medium search-query rounded" />
</div>
</form>
</div>
---code
<p ng-model="result">
{{result}}
</p>
</body>
Everything works well with the ajax I'm sending data and receiving a response, my question is as follows:
In the SearchCtrl function I have a variable called $scope.result that is later referred to in Index.html. If I insert the html code that contains that variable into the SearchCtrl controller it works fine but if it is in the MainCtrl controller it does not work. How can I share this variable between the controllers.
Thanks ahead
Use a service and inject it to both controllers and refer your scope vars to the services variable.
Example:
angular.module("yourAppName", []).factory("myService", function(){
return {sharedObject: {data: null } }
});
function MainCtrl($scope, myService) {
$scope.myVar = myService.sharedObject;
}
function SearchCtrl($scope, $http, myService) {
$scope.myVar = myService.sharedObject;
}
In your template do:
{{myVar.data}}
See an example Uses Angular v1.1.5
The reason you put it in an inner object is to preserve your references, if you keep it without a "sharedObject", and change that object, your binding will be pointing to the old reference and wouldn't show anything in the template.
I am new with angularjs and I am trying to create a filter that remove spaces from a string.
removeSpaces.js
angular.module('filters.stringUtils', [])
.filter('removeSpaces', [function() {
return function(string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[\s]/g, '');
};
}])
home.html
<div ng-controller="ItemController">
<p ng-repeat="item in items">
{{ item.item_name }}
</p>
itemcontroller.js
angular.module('myApp').controller('ItemController', [
'$scope', 'Services', '$http','removeSpaces', function($scope, Services, $http,removeSpaces) {
$http.defaults.headers.common['Accept'] = 'application/json';
return $scope.services = Services.query();
}
]);
I get this error:
Unknown provider: removeSpacesFilterProvider <- removeSpacesFilter
In your app you have to use the module for you app.
So do this and it should work
angular.module('myApp', ['filters.stringUtils'])
I am trying to learn deep linking in angular.
As I click on a link which is created with ng-repeat like on the exp below:
<ul ng-controller="ShowOrderController">
<li ng-repeat="car in cars"><a href="#ShowOrder/cars.indexOf(car)">
{{car.Brand}}</a>
</li>
</ul>
It doesn't display relevant detail of the clicked link
I understand that I am not linking that properly on my controller:
sampleApp.controller('ShowOrderController', function($scope, $http, $routeParams) {
$http.get('data.json').
success(function(data){
$scope.cars = data;
$scope.car_id = $routeParams.carId;
});
});
I just can't figure out or find any source that explains plainly how to create deep linking..
Exp: http://plnkr.co/edit/7D0UegRrtKPxrZ8zfxEL?p=preview
Thanks a lot in advance!
Try this. working demo
You may change the filter as like below
<div ng-controller="ShowOrderController" ng-repeat="car in cars | filter: { id: car_id } | limitTo:1">
I think you haven't defined the filter(i.e 'query1'). Take a look at the following code.
sampleApp.controller('ShowOrderController', function($scope, $http, $routeParams) {
$http.get('data.json').
success(function(data){
$scope.cars = data;
});
$scope.car_id = $routeParams.carId;
id=$scope.car_id;
}).filter('query1',function(){
return function(array){
if(array){
for(var i in array){
if(array[i].id===Number(id)){
return [array[i]];
}
}
}
}
});
And the working plunker is here plunckr .