I am using an angular emoji plugin that requires ng-bind-html. I am using this emoji plugin for creating messages, however I don't want it so that html code such as <h2>hello</h2> can be compiled but the ng-bind-html is mandatory to use the emoji plugin. Any suggestions/ways I can get around this so that posts will include emojis but not html code that gets compiled? Thanks
angular.module("app", ["dbaq.emoji","ngSanitize"]).controller("AppCtrl", function ($scope) {
$scope.message = "Animals: :dog: :cat: :snake: People: :smile: :confused: :angry: Places: :house: :school: :hotel: :poop:";
});
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl">
<div ng-bind-html="message | emoji"></div>
</body>
</html>
emoji plugin --> https://github.com/dbaq/angular-emoji-filter-hd
Try my simple solution:
1. Create file html like this:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.js"></script>
<script src="angular-sanitize.js"></script>
<script src="emoji.min.js"></script><script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl">
<textarea ng-model="message"></textarea><div ng-bind-html="message | emoji"></div>
</body>
Notes:
I embed file js called angular-sanitize.js. Copy here and save as angular-sanitize.js. Then other files 'emoji.min.css, angular.js & emoji.min.js' exists on your app. Please mind your path too.
2.Create js file called script.js like this:
angular.module("app", ["emoji","ngSanitize"]).controller("AppCtrl", ['$scope', function ($scope) {
$scope.message = "Animals: :dog: :cat: :snake: People: :smile: :confused: :angry: Places: :house: :school: :hotel: :poop:";}]);
3.Run it.
Related
i use angularjs module ngAnimate but this does'nt work why i use the same reference for angularjs.org
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-animate.js"></script>
<link rel="style" href="css/style.css">
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<div class="content" ng-controller="PrintCtrl">
<h4>{{title}}</h4>
<p>it's sample content welcome admin in your website</p>
</div>
</body>
var app = angular.module('app', ['ngAnimate']);
app.controller('PrintCtrl',['$scope',function($scope){
$scope.title = "The title";
}]);
I noticed your css tag is linked with rel="style". It should be stylesheet instead of style. If your css is working fine, I think the animate should work
When I use the following static HTML with views, everything works as I expect it would, shown here:
https://embed.plnkr.co/MJYSP01mz5hMZHlNo2HC/
Now what I am asking, is how do I properly get this angular-ui accordion working properly within the ng-view?
See the accordion I am trying to use here:
http://plnkr.co/edit/1ZWBsbO6sQRnZ7CpPrdz?p=info
And my test plunker here, showing that the HTML shows up in the view, but it lacks JS functionality:
https://plnkr.co/edit/I3myvfH5KUkpfV1aWh72?p=info
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script data-require="angular-route#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="Test">
<div ng-include='"header.html"'></div>
<div ng-view></div>
<div ng-include='"footer.html"'></div>
</body>
</html>
You have to define a controller with the name(PageCtrl) you defined.
app.controller('PageCtrl', [function(){
// Your business logic
alert("In am controller");
}])
I'm trying to use these c3 angular charts, but nothing seems to be showing up on the page. THere are no console errors I can find and I've followed the tutorial but nothing appears still.
I've pulled the git repo and referencing the files I think I need.
Why can't I see anything?
Charts:
https://github.com/jettro/c3-angular-directive
Tutorial:
http://jettro.github.io/c3-angular-directive/
Code:
<!DOCTYPE html>
<html ng-app="chart_test" xmlns="http://www.w3.org/1999/html">
<head>
</head>
<body ng-controller="ChartController">
<h1>Line Graph</h1>
<div id="chart1"></div>
<c3chart bindto-id="chart1" show-labels="true">
<chart-column column-id="line1"
column-name="Line 1"
column-color="green"
column-values="30,200,100,400,150,250"
column-type="line"/>
<chart-points point-radius="5"
show-point="true"
point-expand-enabled="true"
point-expand-radius="10"/>
</c3chart>
<script src="d3.min.js"></script>
<script data-require="angular.js#1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="c3-angular.min.js"></script>
<script src="app.js"></script>
<script src="ChartController.js"></script>
</body>
</html>
App.js:
var app = angular.module("chart_test", []);
Chart Controller:
var myApp = angular.module("chart_test");
myApp.controller("ChartController", ["$scope", function($scope){
$scope.message = "hi";
}]);
I am no expert on the subject, but in the getting started section of the page you provided, it says
You have to add the following libraries and stylesheet.
And then lists the following code:
<link href="css/c3.min.css" rel="stylesheet" type="text/css"/>
<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/c3.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/c3-angular.min.js"></script>
<script src="js/app.js"></script>
From what I see, you have included d3.min.js, angular.min.js, c3-angular.min.js, app.js but NOT c3.min.css and c3.min.js.
I would advise you to try including them and if it then still doesn't work, update your question with how that went.
I am having some problems using ng-include. At first I was trying to use it in my project but it caused all the content to repeat indefinitely. Figuring it was something with the way I wired the project I started over. I haven't really added anything except for the angular file and one include and it keeps causing Angular to throw "WARNING: Tried to load angular more than once." and then it times out. No idea what is causing this.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Website</title>
<!-- FOR ANGULAR ROUTING -->
<base href="/">
<!-- CSS Files-->
<!-- Vendor CSS-->
<link rel="stylesheet" type="text/css" href="../libs/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../libs/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div ng-include src="'navigation.html'"></div>
<!-- JS Files -->
<!-- Vendor JS-->
<script type="text/javascript" src="../libs/angular/angular.js"></script>
</body>
</html>
Ultimately what I want is something like this:
<html ng-app="app">
<head>
</head>
<body>
<div ng-include src="'navigation.html'"></div>
<div ng-include src="'header.html'"></div>
<div ui-view></div>
<div ng-include src="'header.html'"></div>
<script src="../libs/angular/angular.js"></script>
</body>
</html>
Plunker:
http://plnkr.co/edit/kFXFKC0VR5OIxwcpZFue?p=info
While not a true answer, after looking back at this, it is way easier to accomplish this with directives.
even just
.directive('myDirective', function() {
return {
template: '<h1> Hello World</h1>'
};
});
then
<my-directive></my-directive>
I have been following a tutorial to learn Angular js, and i am using Web Storm 9.0.1.
I have simply created a Html page and loaded the Angular.js file to the project.
this is my simple code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World ";
}
</script>
</body>
</html>
But all i get when i run the page is :{{helloMessage}} as a header 1 !
What should i do ? what i am missing here ?
You need:
<body ng-app>
This ngApp is needed to make understand AngularJS where it has to work
Here's your the working code:
http://plnkr.co/edit/lPOknrPD5dykwImL6Pb9?p=preview
You just haven't initialized the Angular application. All you need to do is modify your body tag a bit. Notice the ng-app attribute in the body tag below:
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World ";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</body>
check Angular hello word in plunker
<html ng-app="plunker">
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
You always need to put the directive first. You can also do it in or any other html tag. The ng-app directive tells the browser 'hey, this is an Angular app, let's see the script'. After the ng-app it will recognize all Angular directives.
It's also better practice to put the angular script loading at the bottom of the html, after the body. It's advised to load it last for performance and screen loading reasoning.
Thanks all, Yes indeed the problem was with the missing ng-app directive.
Note: the tutorial i was following missed this point!
A working Code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>
Missing the ng-app directive:
<body ng-app="">...</body>
Try this code if you have not found any solution yet.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Hello World </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</div>
<script>
// INITIALIZE THE APP.
var hello = angular.module('HelloWorldApp', []);
// ADD THE CONTROLLER.
hello.controller(
'HelloWorldCtrl',
['$scope', function ($greet) {
$greet.helloMessage = 'Hello World!';
} ]
);
</script>
</body>
</html>
I have defined the "ng-app" directive inside the DIV element and later initialized it in the script. This way I can add multiple view and controller inside the DIV element.
For example. Add another DIV below the header tag.
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<div ng-controller="greet">
<span> {{greetings}} </span>
</div>
Later add this code inside the script tag.
// ADD THE SECOND CONTROLLER.
hello.controller(
'greet',
['$scope', function ($greet1) {
$greet1.greetings = 'Good Morning';
} ]
);
All you need to do is to define an AngularJS application on your page. The ng-app directive defines an AngularJS application. You can do it on your page like :
<html ng-app=""> or
<body ng-app=""> or
<div ng-app="">
Make sure you do it before you start writing other angular JS code.
For more on the fundamentals of Angular JS :
http://www.w3schools.com/angular/angular_intro.asp
change you angular version to 1.2, I did it and it worked.
here it is:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js