I'm trying to implement Angular UI Bootstrap Iconpicker in my project but it doesn't work because I'm using those js files for angularjs tabs:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
and for ui-iconpicker I use those files:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="#routes.Assets.versioned("bower_components/ui-iconpicker/dist/scripts/ui-iconpicker.min.js")"></script>
I think there is a confusion between the two files (ui-bootstrap-tpls) but when I remove one of them the associated component don't work!! any help please
This problem is known to the author of ui-iconpicker.
See ui-iconpicker Issue #4: Doesn't work with ui-bootstrap >= 0.11.0
#justin-lau justin-lau added the wontfix label on Jan 29, 2015
#rapheki commented on May 20:
i had a similar issue, you need to modifiy the ui-iconpicker.js file and replace in line 156 (the templates/iconpicker.html):
"dropdown>" to "uib-dropdown>"
"dropdown-toggle>" to "uib-dropdown-toggle>"
Related
on my html header i have this two lines:
<html>
<head>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
but if i have this two lines at the same time, bootstrap doesn't work. If i comment the line of the angularjs and leave the line for bootstrap alone, bootstrap will process correctly and format the elements on the page.
i have already tried change the order on headers and add diferent links to download the files, but nothing have worked.
Anyone knows a solution for both to work at the same time?
Thanks
You get the followed error in your console:
Uncaught Error: Bootstrap's JavaScript requires jQuery
So just do it as follow, and you get no errors:
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
This must work :)
https://docs.angularjs.org/guide/expression
The simplest example using data bindings =
<span>
1+2={{1+2}}
</span>
works with
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
and the output is 1 + 2 = 3
but if I change to the current workable angular script
<script data-require="angular.js#*" data-semver="2.0.0-alpha.25" src="https://code.angularjs.org/2.0.0-alpha.25/angular.js"></script>
the output is 1+2={{1+2}}
So why does the current angular not allow this simple data binding example to work?
https://code.angularjs.org/2.0.0-alpha.25/angular.js return 404 page
So, please use another version of angular.
your script should be like this
<script data-require="angular.js#*" data-semver="2.0.0-alpha.25" src="https://code.angularjs.org/2.0.0-alpha.25/angular2.js"></script>
if you want to know about more working version of angular then visit this
list of Angular working Version
I am trying to translate a FullCalendar using the language file included in the package. To make it simpler with angular, I use the plugin ui-calendar.
To do so, I imported the language script as described in the doc :
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
... //other includes generated by bower
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- FullCalendar language pack -->
<script src="bower_components/fullcalendar/dist/lang/fr-ca.js"></script>
However, the months and the days are not being translated. I did managed to translate the labels manually using the "monthNames", "dayNames", etc configs, but IMO that's ugly and it doesn't translate the ui.bootstrap.datepicker.
From what I understand, the problem is momentjs who wont take anything I give him. I tried to do a 'moment.lang('fr-ca')' but it doesn't do much. Anyone know a "Mickey Mouse trick" that could help to fix this issue?
Note: ui-calendar uses the v 1.6 of fullcalendar which doesn't include the languages utilities. So I added fullcalendar#2.1.0 to my bower.json. Everything seams to be working properly, I don't see where this could mess up the language since I'm calling fullcalendar directly.
Here is a working plunkr: http://plnkr.co/edit/AFpj79M1C6vOewSWLX8J
You also need to localise angular, you can read the doc here: https://docs.angularjs.org/guide/i18n
To make it work I added the code of i18n/angular-locale_fr-ca.js in the plunkr file ng-fr-ca.js.
Looking at the source of ui-calendar (line 179), you will see it uses anggular $locale service to translate days, month, etc. I have added a console.log to the source so you can see the difference between
var dtf = $locale.DATETIME_FORMATS;
console.log(dtf);
$locale uses engglish by default. If you load one of the i18n locale file, you will have it translated.
I have included these in my index.html because bower is including them:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
Why is the ui-bootstrap.js not included? Because the bower.json from bootstrap and its main property has set "ui-bootstrap-tpls.js" but what about the ui-bootstrap.js?
Even when I include the file outside of the bower:js tags the popover from the datepicker is not visible and I get NO errors in my google chrome.
But when I click on the datepicker button no popover...
UPDATE
Now that I corrected my angularjs modules, now I use just this: 'ui.bootstrap.datepicker'
I get now these errors in google chrome:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/datepicker/datepicker.html
Error: [$compile:tpload] Failed to load template: template/datepicker/datepicker.html
When I look at the source ui-bootstrap-tpls.js file:
.directive( 'datepicker', function () {
return {
restrict: 'EA',
replace: true,
templateUrl: 'template/datepicker/datepicker.html',
scope: {
datepickerMode: '=?',
dateDisabled: '&'
},
Where are these above path template... ? I have them not here. I just installed the angular-bootstrap bower package. Should there not all be included?
UPDATE2
I get these angularjs error now:
See the parent is null and therefore the parent.InsertBefore can not work and throws the exception...
Official Doc
ui-bootstrap-tpls.js library contains the directives and the directive templates.
ui-bootstrap.js is just the directives and you are expected to supply the directive templates.
Most folks use the predefined directive templates (ui-bootstrap-tpls.js). You do not want to include both and that may be why the popover/datepicker is not working. You would essentially have 2 directives working to show/hide the popover/datepicker. Also, do not load the bootstrap.js library as that will cause the same problems.
UPDATE:
In regards to the template not found error, the datepicker directive is looking for the template 'template/datepicker/datepicker.html' in the $templatecache. The ui-bootstrap-tpls.js injects the templates into the template cache at the very end of the js file.
In the ui-bootstrap-tpls.js file you should see several $templatecache.put lines with 'template/datepicker/datepicker.html' being one of them.
Just in case someone else is having the same issue: I was having problems with the datepicker, and the issue was that I was loading the templates before the base JS:
From:
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
To:
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
I just ran into this issue also, the answers above helped me a lot!
In my instance I was using a yo-angular build, and installed ui-bootsrap with bower. The problem was multiple references to ui-bootrap and bootstrap conflicting with the tpls.js verison
Here is my solution:
Simply put within my index.html
Remove
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
Add
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Problem:
This questions comes up as a Google result for
Error: [$compile:tpload] Failed to load template: templates/datetimepicker.html
This may not be a direct answer to your specific problem, but I wanted to leave a note for future users encountering similar problems.
The directive daleotts/angular-bootstrap-datetimepicker introduces a breaking change in v1.0.0:
must include datetimepicker.template.js in the page to load the
template.
(b520f515)
Solution:
Users of angular-bootstrap-datetimepicker can either roll back to a previous version (such as v0.40), or choose to include templates file that was previously included in the base .js file:
// Previously this was the needed file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
// Users who wish to use the default datetimepicker templates must now also include this file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>
I am trying to use chinmaymk.github.io angular-charts from https://github.com/chinmaymk/angular-charts.
I have copied code from the plnkr example: http://plnkr.co/edit/T9J7bz?p=preview
<div data-ac-chart="'bar'" data-ac-data="data" data-ac-config="config" class="chart"></div>
However I don't get any bars on the chart. I can see the legend, horizontal and vertical axis, just no bars.
The data is set up in the controller.
My index.html file has the following imports:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
<script src="~/App/Vendor/Scripts/d3/d3.min.js"></script>
<script src="~/App/Vendor/Scripts/angular-charts-0.2.0/dist/angular-charts.min.js"></script>
<script src="~/App/app.js"></script>
There are other imports, however I think these are the relevant ones.
My controller and view follow the example above but still I don't see the actual bars.
I don't get any errors in the console.
Any ideas? I am happy to post more code if it would help...
This was solved by removing a script tag referencing a local date.js file. I could not reproduce the error when using: <script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>.
It might have been a corrupt date.js file on my side...