this is in the directive.
Have been pounding my brains out for days on this
angular 1.4.7
angular-ui-calendar 1.0.1
fullcalendar 2.3.1 2.4.0 etc
jquery 2.1.4, 2.1.3, 2.1.1
any one else running into this??
You don't list moment.js as one of your dependent scripts, but it is required by full calendar.
I created a plunk just to try this out and I did indeed get the error, but you'll note right above the error you mentioned it complains about moment not being available.
You haven't given me much to go on, but since you didn't mention moment in your dependent scripts that's the best guess I can come up with. If you remove the comment tags that surround the moment.js script in index.html in the plunk I provided, it will render the calendar.
<!--
<script data-require="moment.js#2.10.2" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
-->
Related
I am using Angular 1.5.* together with Kendo UI. I am following the documentation and have completed all the recommended steps found on the Telerik site:
Including the kendo scripts and styles
Adding kendo.directives to my angular module
Using the kendo-[directive] syntax in the markup
Everything renders fine, but when I try to interact with the widgets I am getting the following error:
Uncaught TypeError: f.getClientRects is not a function(…)
This is what my markup looks like:
<input kendo-date-picker ng-model="model.user.dob" />
The same error happens when I try to use a drop down list defined as:
<select kendo-drop-down-list k-data-source="model.languages" ng-model="model.user.language"></select>
I have used Kendo for years, but for the first time, I am using it together with Angular and feel a little lost :)
What am I missing? Any help would be greatly appreciated.
Thank you
I would make sure you have the kendo scripts in the right dependency order
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="./bower_components/angular/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
Another thing that might work for older versions of kendo, is trying the deprecated angular-kendo npm package
<script src="./bower_components/angular-kendo/angular-kendo.js"></script>
Or, it could be caused from the animations so try angular-animate npm package:
<script src="./bower_components/angular-animate/angular-animate.js"></script>
Another thing you might want to check is the date going into the Kendo DatePicker
$scope.model.user.dob = new Date('2016-06-01T04:00:00');
It turns out that the issue was in the kendo version I was using. Once I upgraded to the latest build, everything went back to normal.
I got some trouble integrating the Angular Material date picker in my application:
Looking at the diff between my local version and the demo version, I noticed that I don't have any <style md-theme-style> element in my head. What am I missing? :)
I added the ngMaterial dependency to my app, and included the ./node_modules/angular-material/angular-material.scss file through Webpack. Moreover, I didn't override the $mdThemingProvider configuration.
Any clue? :)
Add the latest release of angular-material.min.js to your project:
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc1/angular-material.min.js"></script>
PS: I had the same issue you were having all day and after reading your question, I decided to also compare my project with the demo version, which brought me to the solution, so thank you!
It's bug in version 0.11.4 See here
It works fine in verion 0.11.3. See here
It also works fine in version 1.0.0-rc7 See here
Just choose a different version.
I tried working on the following plunker example which works fine with angular version 1.2.x.
But when the angular version is updated from 1.2.x to 1.3.x.
It does not seem to work.
The views does not seem to change when I click on the other tab.
http://plnkr.co/edit/nmTggEdWIcMW5bMRKiok?p=preview
The following change was made to the plunker.
<script data-require="angular.js#1.3.x" src="http://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script data-require="angular-animate#*" data-semver="1.3.15" src="http://code.angularjs.org/1.3.15/angular-animate.js"></script>
When tried on the chrome, there were no errors generated on the browser console but the views did not change when clicked on the second tab. Browser used Chrome-latest-version.
Might be a duplicate of
AngularJS, animations with ui router which versions work?
PS: I tried different combination of the bootstrap versions and angular-ui-router versions with angular 1.3.x. Was not able to find a successful combination. I use angular-material-design which requires angularjs version to be 1.3.x. Any help on this issue would be appreciated.
Recently, I have an error regarding to my pagination that can't be updated after filter. Luckily, this was managed, however, now I'm dealing with a conflict regarding to the usage of ui-bootstrap. As I have my project, Im using,
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Based on the codes that I'm relaying with they used,
<script src="angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"; type="text/javascript"></script>
***Here's the thing, I do have as well a datepicker in my codes. But when I used the
<script src="angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"; type="text/javascript"></script>
this datepicker doesn't work. If now I will switch to my formerly ui-bootstrap
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
, now the pagination after filter can't be used but the datepicker will work. Any ideas how to solve this or what I'm going to do? thanks!
From what I understand, your problem is due to directive conflict; e.g. you have a custom directive defined called "datepicker":
angular.module('App').directive('datepicker', ...
That's going to cause problems because UI-Bootstrap also defines a directive with the same name. The simplest solution would be to simply exclude the datepicker module from UI-Bootstrap.
https://angular-ui.github.io/bootstrap/
On their website, you can choose "create a build". It will allow you to download a version of UI-Bootstrap custom-tailored to your needs by adding and removing certain modules, like the datepicker.
Then you will drop the file into your HTML:
<script src="path/to/your/ui-bootstrap.min.js"></script>
I notice you are using Bower to manage your dependencies. Unfortunately, Bower can't work with a custom UI-Bootstrap build; you'll have to manage the file yourself (put it in a subdirectory, like "assets/").
I'm reading https://github.com/ExactTarget/fuelux in order to get familiar with the Fuelux wizard, and how I can integrate it with my AngularJS project.
In the non-AMD section it says :
Non-AMD
If you'd prefer not to use AMD, simply add the loader script to the head tag of your page:
<script src="http://www.fuelcdn.com/fuelux/2.6.1/loader.min.js" type="text/javascript"> </script>
but something in jquery is conflicting with my angular routes.
I'm also using this as a guide, and adding the necessary css links and requirejs links; however the wizard does not render properly (as if it were missing the css styling).
wizard
UPDATE:
In my latest attempt, after downloading from https://github.com/ExactTarget/fuelux/tree/3.0.0-wip , I'm still getting the non-formatted wizard. Please see screen shot :
FuelUX 2.x is AMD only. The loader.js is a polyfill of sorts (almond.js- a minimal AMD API implementation) that allows AMD, just so you don't have to load require.js yourself, but it's still there.
The latest version FuelUX 3 is a WIP branch and is UMD (Universal Module Definition) which means it can be used with/without AMD via tags with only Bootstrap and JQuery as dependencies. You might try it.