I am new to angularjs and I am using "emoji-min.js" and "emoji-min.css" to display the emoji in text field.
But I am not able to display. Here is my code:
<!doctype>
<html ng-app = "app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
<script>
var app = angular.module("app", ["emoji"])
app.controller("AppCtrl", function ($scope) {
$scope.message = "String including Emoji codes :smiley:";
});
</script>
</head>
<body ng-controller="AppCtrl">
<textarea ng-model="message"></textarea>
<p ng-bind-html-unsafe="message | emoji"></p>
<pre>{{ message }}</pre>
</body>
</html>
Please tell where I am going wrong.
For ng-bind-html to work, you need to have ngSanitize module injected in your app.
checkout this
Related
When I try to send html as parameter in translate decorator my html code is displayed as text and not as html. Like in code under:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v1.0.2/messageformat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.15.2/angular-translate.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.15.2/angular-translate-interpolation-messageformat.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.15.2/angular-translate-storage-cookie.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.15.2/angular-translate-storage-local.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.15.2/angular-translate-loader-url.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.15.2/angular-translate-loader-static-files.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.15.2/angular-translate-handler-log.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<p>{{ 'HEADLINE' | translate }}</p>
<p>{{ 'PARAGRAPH' | translate }}</p>
</div>
</body>
var translations = {
HEADLINE: 'What an awesome module!',
PARAGRAPH: 'This is cool link test Check it out!'
};
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
// add translation table
$translateProvider.translations('en', translations);
$translateProvider.preferredLanguage('en');
}]);
app.controller('Ctrl', ['$scope', function ($scope) {
}]);
As a result I get:
This is cool link test Check it out!
html code it self in browser instead of anchor html representation.
I want anchor to be processed as html tag.
Anybody has a suggestion?
In order to actually process the HTML instead of outputting it as characters, you can use the ng-bind-html directive. In your case, it will look like this:
<p ng-bind-html="'PARAGRAPH' | translate"></p>
I am trying to test angular v1.6.2 components and ui-router together but can't get it to work. Here is my
html:
<!DOCTYPE html>
<html lang="en" ng-app="rrrwamac">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <test></test> -->
<ui-view></ui-view>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="index.js"></script>
<script src="test.js"></script>
</body>
</html>
component:
angular.module('rrrwamac').component('test', {
template: '<h3>Its the UI-Router<br>testing..!</h3>'
})
and config:
var app = angular.module('rrrwamac', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider
.state('test', {
url: '',
component: 'test'
});
});
NOTE: When I place component tag
<test></test>
everything works, but when I try using ui-router and ui-view it doesn't.
I am also using live-server that places an extra script into my html and connects to http://127.0.0.1:8080/.
Any help greatly appreciated. Thanx.
I apologize for the poor formatting. Basically, "clientCount" is appearing as {{clientCount}} on my screen, rather than the integer '10'. Any ideas? Thank you!
var app = angular.module('metaDashboard', []);
/**This is for the meta-dashboard home page
*/
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
--------------------------------------------------------------------
<html lang="en" ng-app="app">
<body class="page-body" data-url="http://neon.dev" ng-app="app">
<div class="row" ng-controller="TotalNumberController">
<div class="icon"><i class="entypo-globe"></i></div>
<div class="num"> {{clientCount}} </div>
<h3>Clients</h3>
<p></p>
</div>
</body>
</html>
Your app is called metaDashboard not app, you should change your code to the following:
<html lang="en" ng-app="metaDashboard">
Also ensure that you have angular.js files included in your head section.
Full snippet:
var app = angular.module('metaDashboard', []);
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="metaDashboard">
<div ng-controller="TotalNumberController">
<h1>{{clientCount}}</h1>
</div>
</body>
</html>
I have also included this Plunker here for you demonstrating it working:
https://plnkr.co/edit/t80RjCqjmE3y9bOkESo0?p=preview
As an additional note, it may be best to use the ViewModel syntax rather than $scope which I believe is best practice and may help you if you ever nested your AngularJS controllers.
I've been trying to display JSON data saved on a local directory using Angular but have been getting the dreaded "XMLHttpRequest cannot load file" error because I'm using Chrome. I just need to get this logged on the console and then I can take it from there.
I want to know if there is a good solution to get around this without changing my security setting on Chrome from the command line. Is this a good time to use 'jsonp' instead of 'get'?
Here is my app.js:
angular
.module('myApp', [])
.controller('MainCtrl', ['$scope', '$http', function($scope, $http){
$http.get('data/posts.json').success(function(data){
$scope.data = data
console.log(data);
})
}])
Here is my HTML:
<!DOCTYPE HTML >
<html>
<head>
<title>The network</title>
<link rel="stylesheet" type="text/css" href="normalize.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.js"></script>
<script type="text/javascript" src="javascripts/ng-app/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='MainCtrl'>
{{data}}
</div>
</body>
</html>
Thanks in advance!
i am using SAP UI5 and don't know why is it showing object expected in line 347 while running index.html file in ie.
<html>
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<script src="resources/sap-ui-core.js"
type="text/javascript"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.ux3"
data-sap-ui-theme="sap_goldreflection" >
</script>
<script type="text/javascript" src="OPM_CM.js"></script>
<script>
sap.ui.localResources("opm");
var view = sap.ui.view({id:"OPM_CM1", viewName:"opm.OPM_CM", type:sap.ui.core.mvc.ViewType.JS});
//view.placeAt("content");
buildShell();
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
thanks in advance.
This may be happening because the sap object is not available.
<script>
function init(){
sap.ui.localResources("opm");
var view = sap.ui.view({id:"OPM_CM1", viewName:"opm.OPM_CM", type:sap.ui.core.mvc.ViewType.JS});
//view.placeAt("content");
buildShell();
}
window.addEventListener('load',init);
</script>
adding your code to a function and calling it on body onload may do the trick.
Note: please also give more details about the error you are getting.