Please see relevant jsFiddle
Within this file even though I included angular.sanitize.js I am not able to bind the html elements.
HTML Code:
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<ul ng-repeat="snippet in myHTML" ng-bind-html="snippet"></ul>
</div>
</div>
JS Code:
var app = angular.module('HelloApp', ['ngSanitize'])
app.controller('MyCtrl', function($scope) {
$scope.myHTML = [];
$scope.myHTML.push('<li>Test1</li>');
$scope.myHTML.push('<li>Test2</li>');
});
Nothing is being displayed when running the jsFiddle. When debugging I am getting an injector error.
Please let me know if you need any more relevant information
Make sure ngSanitize is loaded after Angular. Updated working fiddle: http://jsfiddle.net/36qp9ekL/444/
Related
I'm a AngularJS newbie. I have to learn it to help maintain an existing site. I made a simple angularjs app to just print hello but it is not working. What is wrong with my code. Thank you.
Codepen: https://codepen.io/centem/pen/pozRNqN?editors=1010
html
<div ng-app="testApp" ng-controller="testController">
{{test}}
</div>
angularjs code
var app = andgular.module('testApp', [])
app.controller('testController', function($scope) {
$scope.test = 'hello'
})
andgular in your js code is a typo. Just replace with angular.
I'm trying some initial stuff to get used to AngularJS. My current source is SoloLearn. I tried to recreate their app, which adds +1 to a counter when a button is clicked.
I have tried checking the code from their app, and I've also copied and pasted their work onto my HTML file and it still doesn't work, I tried an online tool for ascii diffs and my code should be identical, yet my inspector yields this:
http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=clickCounter
at angular.js:38
at angular.js:10839
at ba (angular.js:9931)
at n (angular.js:9701)
at g (angular.js:9055)
at g (angular.js:9058)
at g (angular.js:9058)
at angular.js:8920
at angular.js:1919
at m.$eval (angular.js:18161)
I checked the site and as I understand, my code should still be working, yet it's not.
My code:
<div ng-app="MyApp" ng-controller="myCtrl">
<button ng-click="count=count+1">Click me!</button>
<p> {{count}} </p>
</div>
<script>
var app = angular.module('MyApp',[])
app.controller('myCtrl', function($scope) {
$scope.count=0;
});
</script>
Their code:
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
</script>
Thanks for the help!
I have added both in different plunker, both are working
http://plnkr.co/edit/Pk8bY3jMiRqwiyWhxEkn?p=preview
http://plnkr.co/edit/aJZTXMQ1dATZI4XUSCmc?p=preview
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
As #Lex mentioned, I needed to define the Angular app specifically for the app I was running and not have it all generically crammed in the same place.
The code on the first URL I posted is working now. Basically changing the body tag to this: <body ng-app=""> and naming each div app made everything work as should.
Thank you all for your help.
I was trying to write a simple Angular app, when I came upon a problem. My perfectly simple and short boilerplate code runs entirely fine in a Codepen, but it fails to work in a JSFiddle. The snippet I created below works fine as well, but I cannot figure out why it does not work in JSFiddle. Could anyone point out what the problem is?
Codepen link: http://codepen.io/chalarangelo/pen/YWdvBV
JSFiddle link: https://jsfiddle.net/chalarangelo/1d12hm5f/1/
Code snippet:
var app = angular.module('myApp', []);
app.controller('myController', [
'$scope',
function($scope) {
$scope.demoText = 'AngularJS: This is some demo text!';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<p>
{{ demoText }}
</p>
</div>
</div>
You should click the JAVASCRIPT button and select an Angular version under the FRAMEWORKS & EXTENSIONS dropdown, instead of including it as an external resource.
To fix your problem, you must select the LOAD TYPE as No wrap - in <head>.
I am really new to AngularJS. So this question might be very basic but I don't get a clear answer from other post so I try to ask a new question.
I am woundering why angulars js ng-bind-html removes all script tags from the content I want to paste in my website.
I just try it with this code example from AngularJS documentation website which shows a simple bind-html example with a java script tag inside.
(function(angular) {
'use strict';
angular.module('bindHtml', ['ngSanitize'])
.controller('Controller', ['$scope', function($scope) {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>'+
'<script type="javascript">' +
'alert(1);'+
'</script>';
}]);
})(window.angular);
This code snippet shows the html template:
<body ng-app="bindHtml">
<div ng-controller="Controller">
<p ng-bind-html="myHTML"></p>
</div>
</body>
But the Chrome Inspector shows that AngularJS apparently removed all java script without a warning message. Exist a way to bypass this removing or do I have to rewrite all old style jquery and what ever javascript into AngularJS?
Screenshot from code inspector of Chrome
Thank you
You need to inject $sce service into your controller or Directive etc. and use $sce service like this :-
$scope.myHTML= $sce.trustAsHtml("I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>'+
'<script type="javascript">' +
'alert(1);'+
'</script>");
And bind this in your HTML page e.g;
<body ng-app="bindHtml">
<div ng-controller="Controller">
<p ng-bind-html="myHTML"></p>
</div>
</body>
I'm trying to make an angularjs jfiddle for another question, but I can't get it working. Can somebody look at it and let me know what I'm doing wrong?
<div ng-app="myApp">
<div ng-conroller="MyController">
Click me: <input type="checkbox" ng-model="checked"/><br/>
<div>
{{checked}}
</div>
</div>
</div>
js:
var app = angular.module('myApp', [
'ngAnimate',
'my.controllers'
]);
var controllers = app.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.checked = true;
});
fiddle link
fiddle link without external libraries
fiddle link with only ng-animate ext library
Can it be that it's because jsfiddle adds a "http://fiddle.jshell.net/_display/" in front of any external library location? Like when I try to add "ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js" then jsfiddle changes it to "http://fiddle.jshell.net/_display/ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"
WHY?
You need to set option no wrap - in <body>
You should use:
var controllers = angular.module('my.controllers', []);
Instead of:
var controllers = app.module('my.controllers', []);
This fiddle works: http://jsfiddle.net/NBhn4/1/
EDIT:
To work with ng-animate you need to include external libraries in correct order and use No-Library (pure JS) option or eg. any jQuery library:
Updated fiddle: http://jsfiddle.net/NBhn4/175/
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/furkankatman/trgrjwf1/7/