Hello I want to print content from an array of objects using angular js. I know that there are a lot of questions like this but there isn't any case where the same problem occurs. I want to print an attribute of an object as html. I use ng-sanitize as seen in many examples and it works fine though i get an error in console.
Here my test case:
<body ng-controller="myCtrl">
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
<script>
var app = angular.module("MainCtrl", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
</script>
which works fine and print the elements as it should but in the console i get this error:
TypeError: c.push is not a function
at Function.K.$$addBindingInfo (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:78:223)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:252:330
at ea (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293)
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
at k (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:281:253 <div ng-bind-html="widget.content" class="ng-binding">
I use angular 1.4.8
Do you have any ideas why this error occurs or how to solve it?
Thx in advance
I forked your plunkr to show the problem you are encountering.
Whenever you use angular modules like ngRoute or ngSantize, it is important that the version of the module match exactly to the version of the angular library. In your case, you were using angular 1.4.8, but angular ngSanitize 1.0.3.
Updating the code to the proper version of ngSanitize from the CDN (and using angular.js instead of angular.min.js for debugging) shows that the error does not occur with ng-bind-html.
Use correct Versions for .js files... here is the code.... This is running perfectly
this is index.html
<html ng-app = "myapp">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body ng-controller = "myController">
<h1>Welcome to the Angular</h1>
{{4/3}}
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
</html>
and this is test.js
var app1 = angular.module('myapp',['ngSanitize']);
app1.controller("myController" , function($scope){
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
save these two files in one folder and run.. it gives output perfectly
Found the bug, don't use ng-bind-html, that causes the issue.
Use single angular expression inside your html and it'll just work.
However I don't know what causes the issue.
Plunkr: http://plnkr.co/edit/xiSGVIPXb27GcKRh9yR1
Related
I'm trying to get Tiny MCE to work in angular and having less than stellar success with it.
Currently I cant get past this error:
Unable to get property 'body' of undefined or null reference
I even tried to just get a basic fiddle running with it but failed at that too. http://jsfiddle.net/m0z0n6dL/
As far as I understand all you need is the tinymce-angular script and then decorate your textbox with <textarea ui-tinymce="tinymceOptions" ng-model="text" type="text"><textarea>
and to include it in the module
var myApp = angular.module('myApp', ['ui.tinymce']);
But this is failing on:
Unknown provider $sceProvider <- $sce <- uiTinymceDirective
If anyone could show me a simple example using CDNs for angular and tinymce dependencies I would be really happy.
Well, it seems you MUST instantiate your module as ui.tinymce, otherwise it doesn't work.
Here's an example:
angular.module('ui.tinymce')
.controller('mainCtrl', function($scope, $sce) {
$scope.updateHtml = function() {
$scope.tinymceHtml = $sce.trustAsHtml(ctrl.tinymce);
};
});
<!DOCTYPE html>
<html ng-app="ui.tinymce">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/ui-tinymce/master/src/tinymce.js"></script>
</head>
<body ng-controller="mainCtrl">
<form method="post">
<textarea ui-tinymce
ng-model="tinymce"
ng-change="updateHtml()"></textarea>
</form>
<div ng-bind-html="tinymceHtml"></div>
</body>
</html>
Note: The example above won't compile well because the stacksnippets is blocking the url of tinymce.
You can see the full demo here without errors.
I want to learn AngularJS to use in JSF pages. This is purely learning purpose.
I tried simply add AngularJS code inside the jsf. But seems it doesn't identify the AngularJS code. it simply out put the same My first expression: {{ 5 + 5 }} in the browser.
my jsf page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="hi" >
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Can anyone help me how to get the output of the AngularJS expression within the jsf page? or show me some direction
UPDATE
My Actual intention is to get some json from Managebean or from another jsf page and populate here. but for that as testing I tried to create a dummy json structure. but still jsf doesn't identify AngularJS component. It's simply print
My first expression: {{ 5 + 5 }}
Browser console prints MyFirstAng.xhtml:24 Uncaught TypeError: app.conntroller is not a function
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myAPP" ng-controller="customerctrl">
<p>My first expression: {{ 5 + 5 }}</p>
<!-- <ul>
<li ng-repeat="x in myData">
{{x.Name + ', ' + x.Age}}
</li>
</ul>
-->
</div>
</body>
<SCRIPT type="text/javascript">
var app = angular.module('myAPP',[]);
app.conntroller('customerctrl', function($scope){
// $scope.myData=[{Name:'jani',Age:'32'}];
});
</SCRIPT>
</html>
Ok, I found the issue. It was a typo in the app.controller. I had type additional "n". it worked. Thanks for all so far guiding me to spot the issue. I thought I am missing to include some AngularJS library or something.
In order for angular to initialize ng-app="hi" there needs to exist a module with that name. Otherwise you should be seeing an exception thrown in browser dev tools console. Please note console errors when developing javascript apps
Either include a module with that name or remove the name from the attribute and just use ng-app
Either paste this
var app = angular.module('hi',[]);
in your script or make the ng-app="" ... Your choice.
If you specify anything in the ng-app then you have to make a module as given above by me. Otherwise just dont specify anything in the ng-app i.e. ng-app="".
At a later stage when you want to make a controller then you can make a module.. For now its best left empty.
I am working on a Firefox add-on that uses AngularJS.
The issue is with 'ng-src'. It does not load the referenced image.
When I switch to 'src' the image loads fine.
Example.html and 'icon-32.png' are within same folder.
Appreciate your help in making sense of this issue.
Below are the code snippets.
Example.html
<html ng-app="MyAddon" ng-csp>
<head>
</head>
<body ng-controller="MainCtrl" dir="{{dirr}}">
<div border="0">
<img ng-src="{{logo}}" width="32" align="center">
<input id="textbox" type="text"> </input>
<button id="textboxbutton" type="button"> {{ButtonText}}</button>
</div>
<script src="lib/angular.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
app.js:
function MainController($scope) {
$scope.ButtonText= 'Hit me!';
$scope.dirr = 'rtl';
$scope.logo= 'icon-32.png';
};
var MyModule = angular.module('MyAddon', [])
.controller('MainCtrl', MainController)
It is because angular keeps adding unsafe: to your image url. I think this is the solution, please try: Angular changes urls to "unsafe:" in extension page
and whitelist the resource:// urls. without unsafe: it works.
I saw this from using DOM Inspector:
I'm trying to follow the tutorial using notepad and Chrome, here's the code I have but it comes up with the error
Error: [ng:areq] Argument 'testhere' is not a function, got undefined
http://errors.angularjs.org/1.3.15/ng/areq?p0=testhere&p1=not%20a%20function%2C%20got%20undefined
Any idea what on earth I'm missing here? I'm sure it's trivial and daft but can't find it for the life of me!
<html ng-app>
<head>
<script>
function testhere($scope)
{
$scope.totalcount=4;
}
</script>
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body>
<div ng-controller="testhere">
{{totalcount}}
</div>
</body>
</html>
From Angular 1.3.x you cant define global controllers by defualt
there are two ways
1) register controllers with .controller()
First make an module by providing name of module in first argument and dependencies in second(there are no dependencies for now)
angular.module('myModule',[])
use .controller()
angular.module('myModule',[])
.controller('testhere'.function CommentsCtrl($scope) {
...
})
2) or set global controller option
angular.module('myModule',[])
.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
in html
<html ng-app="myModule">
Go through this jsbin example comment the required version of angular and see the difference.
Please see https://docs.angularjs.org/guide/controller to see how to define a controller in Angular. Your testthere now is just a function in javascript, not a controller
And also, your application javascript (controller, etc) should be after angular library in the head section
I'm currently trying to figure out who broke my script, me or angular-animate.js. I'm pretty sure it's me, but hey, miracles could happen and I can be innocent this time.
This is my HTML code:
<body data-ng-app="app">
<divdata-ng-controller="Ctrl">
<label>
<input type="checkbox" data-ng-model="checked"> Click me
</label>
<div data-ng-show="checked">
Bu!
</div>
</div>
<script type="text/javascript" src="js/angular.1.3.0.min.js"></script>
<script type="text/javascript" src="js/angular-animate.1.2.26.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-tpls-0.9.0.min.js"></script>
<script type="text/javascript" src="js/exercise-7.js"></script>
</body>
This is my exercise-7.js:
var app = angular.module('app', ['ngAnimate']);
app.controller('Ctrl', ['$scope', function($scope) {
$scope.checked = false;
}]);
And this is the error I'm getting:
The funny thing is that I'm not using "angular-animate.js", but "angular-animate.min.js". I do have the map file localy as well, but it points to the minified version. So it couldn't be because that, right?
In my Chrome console, I opened the error message and the file seems to be empty (even thought it doesn't exists).
So I downloaded the unminified version of angular-animate and I could finally see that it's complaining about row 992:
I can't understand this problem and I am reaching out to you guys. What did I do wrong? I can see that the angular-animate.js was changed approx 21 hours ago, but I am not sure if that is something relevant to my issue.
You upgraded angular to 1.3.0 but left angular-animate on 1.2.26. Upgrade angular-animate to 1.3 and you'll be set:
https://code.angularjs.org/1.3.0/angular-animate.js
https://code.angularjs.org/1.3.0/angular-animate.min.js