I am new to AngularJS, building an application using AngularJS and RequireJS.
In one of the modules having a controller, I created a modal dialogue using $modal service. The modal dialogue has Angular Schema Form with Datepicker Addon.
Datepicker requires some script files to work. When I add those script files in index.html (main page) in the head section, it works within a dialogue box. But I can't change the main page, so I tried loading the dependencies in module file as shown in module.js but it does not work.
module.js
define(
[ angular, .../path to datepicker dependencies ],
function(angular) {
return angular.module("mainctrl", [])
.controller("test", function($scope,$modal) {
$scope.formOperation=function() {
$modal.open({
templateurl:../schema-form.html,
controller: modelCtrl
});
}
})
});
Below is the body section of the main page wherein if I add those script dependencies in head tag, datepicker works.
index.html
<body>
<div data-ng-view="" id="ng-view"></div>
<script src="bower_components/requirejs/require.js" data-main="../scripts/main"></script>
</body>
schema-form.html
<div class="modal-content h-widget-action-form">
<style>
@import url('/addons/h/widgets/h-action/h-action.css');
</style>
<div class="modal-body">
<!-- <i class="glyphicon glyphicon-remove pull-right" data-ng-click="cancel()"></i><br/>
<div data-ng-if="message" class="alert" data-ng-class="message.type">{{message.text}}</div> -->
<form novalidate name="formCtrl" sf-schema="definition" sf-form="form" sf-model="model"></form>
</div>
</div>
I checked the script tags appended by requirejs in index.html in head and it does contain all my datepicker dependencies in correct order (configured using shim), but still datepicker does not work until I specify those dependencies explicitly in the index.html head tag.
Could anyone tell me where I am going wrong?
My first thought was the datepicker component is not a module so define may not load it properly, have you tried wrapping it as a JavaScript module, it may be enough, it attaches itself to angular via
angular.module('schemaForm').directive('pickADate', function() {so it would need to be able to accessangularin whatever scope it gets loaded obviously.I assume you probably solved this already given the age of the issue.