EDIT
If it helps the code that it errors at is
// Update model when calling setContent (such as from the source editor popup)
setup: function (ed) {
ed.onSetContent.add(function (ed, o) { <----Right Here ed is undefined
if (ed.isDirty()) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase)
scope.$apply();
I'm trying to get a working example of tinymce ported through angular-ui but I keep getting the following error on line 1225 of angular-ui
Cannot call method add of undefined. I just updated my build of angular-ui so I know it's up to date.
I'm calling my scripts in this order
bootstrap css
jquery ui css
angular-ui css
jquery script
jquery ui script
tiny mce
tiny mce jquery port
angular js
angular ui.js
app.js
controller.js
directives.js
My HTML looks like this
<body ng-app="tinymce">
<textarea ui-tinymce ng-model="tinymce"></textarea>
<body>
and I pass the ui dependecy like so
"use strict";
var app = angular.module('tinymce', ['ui']);
I don't know what else to do.
any ideas?
I've got the same problem, If you are installing using bower, you might be installing tinymce-release 4.0.2. I just found that that version is not working.
Using bower, the last available version is 3.5.8. I've simple change the version tinymce-release and now it works
It seems they have not updated Bower with the latest code from github. If you copy this into your components folder it will work:
https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js
"use strict";
var app = angular.module('tinymce', ['ui.tinymce']);
Related
I'm not able to render simple angular material components even after including all the necessary dependencies.
HTML
<div ng-app="MyApp" layout="row">
<md-button>Button</md-button>
</div>
JS
angular.module('MyApp', ['ngMaterial']);
Here's the link with all the dependencies included:
https://jsfiddle.net/rxby6cac/3/
Confused... What's the issue with this simple code?
I've updated your fiddle... it was fine, the problem was the load type (see picture below). You have to change it to load type no wrap - <body>.
Additionally, I've note that your are using a angular material RC (Release Candidate) version. As a advice try to use a stable version (move to 1.1.3).
I'm trying to use Angular 1.5.0-beta.0 which I have installed from npm.
According to some guides - we can now create a component using module.component instead of the old fashion module.directive.
This is the component code:
export default angular.module('app.components.header', [])
.component('dashboardHeader', {
controller: 'HeaderCtrl as headerCtrl',
template: `This is test.`
})
;
My html is:
<body>
<dashboard-header></dashboard-header>
<div ui-view="content">
</body>
I'm getting:
angular.module(...).component is not a function
What could be the problem?
I had the same issue did a
bower install angular it still gave the same error ,
Finally I updated the version of angular.js in script src tag and it worked .
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
There is nothing wrong with your code. Install the stable release of angular 1.5. I had the same problem and then deleted angular and installed it with:
bower install angular
Make sure you are not using old version of Angular JS CDN
I had the same issue for meteor js (AngularJs with MeteorJs) .
We need to update the angularjs version.In my case I updated 1.4.8 to 1.5.3 then restarted the meteor server, error solved.
Command to update angular js(In case of meteor)
meteor update angular:angular - this will update the angularjs to the latest version available.
Hello I am using UI Bootstrap for displaying datepicker in my app.
this is my reference order:
<!--ANGULAR CORE-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<!--APPLICATION INIT-->
<script src="app/js/app.js"></script>
<!--JQUERY-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--BOOTSRAP UI-->
<script src="app/js/libs/ui-bootstrap-tpls-0.11.0.min.js"></script>
I use the tpls version because it supposes to include the templates.
I inject the dependency like that:
angular.module('globapp', ['ngRoute', 'ui.bootstrap'])
when I try to popup the datepicker it doesn't show. In the chrome developer I can see that the code searches for template folder, and I recieve 404 error (datepicker.html, popup.html).
I searched about that in the internet, and everyone tells the same thing: if I use the tpls version, it should provide me the default templates.
thanks
Your app.js has your app init -so that's where your creating your angular module and are hoping to inject bootstrap-ui as a dependency but that script hasn't been loaded yet as it's last in the list.
This would be the first thing to check. Load your scripts in order of least dependent first so jquery first then your core angular, then your plugin libraries and then your app scripts.
What issues might I experience in having two different versions of AngularJS loaded into one page?
Obviously this seems like a stupid thing to do, but my use case is a page that uses AngularJS incorporating a third-party component that drags in its preferred version of AngularJS.
Update:
Found some info:
https://groups.google.com/forum/#!msg/angular/G8xPyD1F8d0/u1QNDNvcwW4J
https://github.com/angular/angular.js/pull/1535
Angular is really not prepared to co-exist with other version. But it's feasible.
First of all load angular library and make sure that before loading window.angular is empty:
<script src="vendor/angular/1.2.0/angular.min.js"></script>
<script src="app/app2.js"></script>
<script>
var angular2 = angular;
window.angular = null; // here we're cleaning angular reference
</script>
<script src="vendor/angular/1.0.5/angular.js"></script>
<script src="app/app1.js"></script>
<script>
var angular1 = angular;
</script>
Note that each application (app1.js, app2.js) for each version of angular should be loaded immediately after loading angular library.
Each JavaScript file of the application shoud be wrapped in self executing function (function(angular) { ... })(angular). Look at the example of app2.js:
(function(angular) {
angular.module('myApp2', []).
controller('App2Ctrl', function($scope) {
$scope.$watchCollection('[a, b, c]', function() {
console.log(angular.version.full);
});
});
})(angular);
Note that here I'm using $watchCollection which is only available for angular 1.2.x. By providing scope of anonymous function for each file you are forcing application to reach angular property instead of window.angular property.
Finally you have to bootstrap the application using manuall method:
<body>
<div id="myApp1" ng-controller="App1Ctrl">
</div>
<div id="myApp2" ng-controller="App2Ctrl">
</div>
<script>
angular1.bootstrap(document.getElementById('myApp1'), ['myApp1']);
angular2.bootstrap(document.getElementById('myApp2'), ['myApp2']);
</script>
</body>
Working plunker here. After running please check console window to see logged versions of angular used.
Great question! Like you, we were unable to uncover much on this topic...we are in the process of deploying a version of Angular with our product which will be embedded within client websites that could also have Angular already loaded.
Here is what we have done:
Modify the Angular source - do not use "window.angular" or "angular" in your implementation, choose some other variable or object property to house it. If you do use "window.angular" and/or "angular", it could break both applications if the versions are different.
Rename all delivered objects (directives, etc); otherwise, the other version of angular could attempt to process your directives.
Rename all CSS classes used by Angular (ng-cloak, etc). This will allow you to style your version of Angular separately from the other version.
Manually bootstrap your application, as described by 'kseb' above.
If you are going to completely name space AngularJS as I have described here, take care to not do a global search and replace because angular does need a "window" reference for registering events, and a few other places.
I just finished doing this at work and I am in the process of testing. I will update this answer with my results.
Matt Burke describes a process to wrap the Angular JS libs in a function to create a closure. Downside is that you cannot load Angular via a public CDN as you have customized the download.
http://www.mattburkedev.com/multiple-angular-versions-on-the-same-page/
Angular 2 will provide a new router with similar features to UI router, but that will also allow to have some routes in Angular 1 and others in Angular 2.
This router is currently being backported to Angular 1, see here a presentation from the developer of the new router explaining how this will work.
The idea behind a common cross-version router with support for both version is to help users upgrade from Angular 1 to Angular 2.
An example copied directly from
http://angular-ui.github.io/bootstrap/
Does not work at all, neither locally nor in plunker. Don't know why. Bootstrap CSS is loaded, so is ui-bootstrap-tpls.min.js and angular.min.js (angular itself is working just fine though).
Here's the plunker:
http://plnkr.co/edit/15GWWFSUwab4VmaxfFPf
I am getting no js errors in a browser, yet it's not working.
Please help. I need to get this working on my website (i.e. the accordion doesn't work even when I write my own html/js code).
A plunker created from the demo site works flawlessly, just created a plunker from the demo site: http://plnkr.co/edit/z9RQKgNBTRbigyQs7OGW?p=preview
In your plunker you are not declaring dependency on the ui.bootstrap module as described on the very top of the demo page:
As soon as you've got all the files downloaded and included in your
page you just need to declare a dependency on the ui.bootstrap module:
angular.module('myModule', ['ui.bootstrap']);
After adding a dependency on the mentioned module your plunker works as well:
http://plnkr.co/edit/00bK0rNDYIrH9a9TVRk3?p=preview
One more thing - you need at least AngularJS 1.0.5 - there were bugs in earlier versions of AngularJS that prevented this directive from working correctly.