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
Related
I have a super simple angular js app with the latest version. I have no idea why it's throwing this error. The entire code is below:
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="MyApp">
<p>{{1+2}}</p>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script>
var app = angular.module('MyApp', []);
</script>
</body>
</html>
And the error is:
todo.js:1 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=MyApp&p1=Error%3A%2…tension%3A%2F%2Fkdhniogamakmhndnlahkfcnlihmpfdjb%2Fjs%2Ftodo.js%3A1%3A7033)
Things that I tried and didn't work:
Added <script> for angular router js
Put the ng-app on <html> instead of <body>
Included a dummy controller which does nothing
Visited the link in the error, doesn't explain what the issue is
Nothing seems to work and I've spent over 2 hours so far. Any help will be appreciated :(.
Edit: The code itself works i.e. the <p> tag displays 3. But the error doesn't make sense to me. What is todo.js?
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 am getting an strange error while using ngTagInput library:
Error: type property can't be changed.
Here is the screenshot of that error - Error Screenshot.
HTML Code -
<html ng-app="project">
<head>
<link href="/css/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="/css/ng-tags-input.min.css" rel="stylesheet" />
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
<script type="text/javascript" src="/assets/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src='/js/angular.min.js'></script>
<script src="/js/ng-tags-input.min.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<form ng-controller="MainCtrl" role="form">
<div class="col-md-12 topM10px">
<tags-input ng-model="formInfo.tags" placeholder="Add a keyword"></tags-input>
</div>
<div class="col-md-12 topM10px">
<div ng-click="submitidea()" class="col-md-3 submitbtn">Submit</div>
</div>
</form>
</body>
</html>
Controller code (app.js)-
var app = angular.module('project', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.formInfo = {};
$scope.tags = [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
$scope.submitidea = function(){
console.log($scope.formInfo);
}
});
Please someone help. Thanks in advance
You appear to have a conflict between one of more of your libraries. This can probably be resolved by isolating which library is causing the issue (when commented out, the error goes away), and then trying different versions of that library and/or Angular.
I did a fiddle that uses the same version of Bootstrap and jQuery that you are, but is using Angular 1.4.8 instead of 1.5, so I believe the conflict is between jQuery 1.8.1 and Angular v1.5.0-rc.0 since the fiddle works without any errors. Recommend dropping your Angular version down to 1.4.8 and see if that resolves the issue.
Add library angular first
For example:
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'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.