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.
Related
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
I am making a simple program in Angular.js to print a name. Alas, still it shows an error.
HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.min.js"></script>
<script src="angularScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{name}}
</body>
</html>
AngularScript.js
// Defining Module
var app = angular.module('myApp',[]);
// Defining Controller
app.controller('myCtrl', function ($scope) {
$scope.name = "Peter";
});
Error:
-> Uncaught ReferenceError: System is not defined
-> Uncaught ReferenceError: angular is not defined
Can someone help me out, with where is the problem?
Use the correct version of AngularJS script file.
You are writing AngularJS script of 1.4 but including 2.0.
Just replace your script tag with:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
Just started on AngularJS, and it has been a challenging ordeal so far.
My problem today is I'm trying to configure a controller through a variable on the URL. I don't want the "real" controller to have to know where a given parameter came from, so long as it's there. The main app controller is therefore responsible of getting the parameter from the URL, and setting a constant that the "real" controller will use.
For the life of me, I cannot see what I am doing wrong in the initialization. Any help would be greatly appreciated (including what are standard practices to troubleshoot these kind of issues :))
Here is the html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- the base tag is required for th Angular.js $location.search() function to work correctly -->
<base href='/' />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script>
angular.module("myController.constants", []);
angular.module("myApp", ["myController", "myController.constants"], function($locationProvider) {
$locationProvider.html5Mode(true);
})
.controller("myAppCtrl", ['$scope', '$location', function ($scope, $location) {
var searchObject = $location.search();
angular.module("myController.constants").constant('myConstant', searchObject['theConstant']);
}]);
</script>
<script src="js/controllerExample.js"></script>
</head>
<body ng-controller="myAppCtrl">
<div ng-controller="myControllerCtrl">
<p>The constant is {{theConstant}}</p>
</div>
</body>
</html>
Here is the js for the controller:
angular.module("myController", ["myController.constants"])
.controller("myControllerCtrl", ['$scope', 'myConstant', function ($scope, myConstant) {
$scope.theConstant = myConstant;
}]);
With the code above, I keep getting this error message
Error: [$injector:unpr] Unknown provider: myConstantProvider <- myConstant <- myControllerCtrl
Thanks!
I could be mistaken but I don't think you can declare a module inside a controller declaration. Try putting
angular.module("myController.constants").constant('myConstant', searchObject['theConstant']);
outside "myAppCtrl" declaration.
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've set up a small AngularJS/Firebase (AngularFire) page that updates the DOM with a textbox (the classic example). The code works fine in Chrome and Firefox, but not IE10. I've tried the recommended fixes for IE7 and lower but they haven't worked.
HTML:
<!DOCTYPE html>
<html ng-app="myModule">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
<script src="https:/cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body ng-controller="myApp">
<div>
<input type="text" ng-model="name" /> Hi {{name}}
</div>
</body>
main.js
angular.module('myModule', ['firebase']).controller('myApp', ['$scope', 'angularFire',
function($scope, angularFire) {
var url = new Firebase('https://myaccount.firebaseio.com/example');
angularFire(url, $scope, 'name', '');
}
]);
What could be causing the problem?
Thanks.
I assume and hope you've solved this already, but anyway: you have one slash ('/') missing from the URL pointing to firebase.js which makes IE to trip over. Interestingly, other browsers seem to be able to load the script.
You are also missing the starting <head> element.