当我尝试在Full calendar中加载angular js时,出现了错误



我试图加载一个简单的完整日历插件和点击每个日期,我试图显示一个示例模态对话框,显示用户选择从数据库中获取的组织和分支的选项,但角模块没有被加载,变量不被评估,它停留为{{org.orgname}}和{{branch. branchname}}

这是我的javascript

<script type="text/javascript">
    $(function()
            {
            var ScheduleApp = angular.module('ScheduleApp', ['ui.calendar','ui.bootstrap']);
            ScheduleApp.controller('ScheduleAppContoller', function($scope,$http) {
                $scope.organizations = [];
                $scope.organization = "";
                $scope.branches = [];
                $scope.branch = "";
                //$scope.managedEntities = [];
                var getOrganization = "getOrganizations";
                $http.post(getOrganization).success(function(data) {
                    $scope.organizations = data;
                });
                $scope.selectBranch = function() {
var orgId = $scope.organization;
                    var action = "getBranchByOrgId?";
                    var param = "orgId=" + orgId;
                    $http.post(action + param).success(function(data) {
                        $scope.branches = data;
                    });
                }
            });
        });
    </script>

和我的HTML

<body  ng-app="ScheduleApp">
    <div id='calendar' style="Width: 90%; padding-left: 10%"></div>
    <div  id="createEventModal" class="well modal fade" tabindex="-1" style="Width: 40%; height: 550px; margin-left: 30%; margin-top: 20px;" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true"  ng-controller="ScheduleAppContoller">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h3 id="myModalLabel1">Create a new Schedule</h3>
        </div>
        <div class="modal-body">
            <form id="createAppointmentForm" class="form-horizontal">
                <div class="form-group">
                    <label for="branch " class="col-sm-5 control-label2">Title</label>
                    <div class="col-sm-6">
                        <input type="text" name="scheduleTitle" id="scheduleTitle"
                            class="form-control" data-provide="typeahead"> <input
                            type="hidden" id="apptStartTime" /> <input type="hidden"
                            id="apptEndTime" /> <input type="hidden" id="apptAllDay" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="branch " class="col-sm-5 control-label2">Managed
                        Entity Group:</label>
                    <div class="col-sm-6">
                        <input type="text" name="patientName" id="patientName"
                            class="form-control" style="margin: 0 auto;"
                            data-provide="typeahead" data-items="4"> <input
                            type="hidden" id="apptStartTime" /> <input type="hidden"
                            id="apptEndTime" /> <input type="hidden" id="apptAllDay" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="branch " class="col-sm-5 control-label2">Organization
                        :</label>
                    <div class="col-sm-6">
                        <select class="form-control" ng-model="organization"
                            ng-change="selectBranch()" id="organizationId"
                            name="organizationId">
                            <option value="">Please select Organization</option>
                            <option
                                ng-repeat="organization in organizations|orderBy:'orgName'"
                                value="{{organization.orgId}}">{{organization.orgName}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="branch " class="col-sm-5 control-label2">Branch:</label>
                    <div class="col-sm-6">
                        <select class="form-control" ng-model="branch" name="branchId"
                            id="branchId" name="branchId" style="width: auto;">
                            <option value="">Please Select Branch</option>
                            <option value="{{br.id}}"
                                ng-repeat="br in branches | orderBy:branchName">{{br.branchName}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="branch " class="col-sm-5 control-label2">Checklist
                        Type:</label>
                    <div class="col-sm-6">
                        <input type="text" name="patientName" id="patientName"
                            style="margin: 0 auto;" data-provide="typeahead" data-items="4"
                            class="form-control"> <input type="hidden"
                            id="apptStartTime" /> <input type="hidden" id="apptEndTime" />
                        <input type="hidden" id="apptAllDay" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="branch " class="col-sm-5 control-label2">Add
                        Recurrence Rule</label>
                    <div>
                        <input type="checkbox" name="isRecurrencePresent"
                            id="isRecurrencePresent" style="margin: 0 auto;"
                            data-provide="typeahead" data-items="4" />
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button type="submit" class="btn btn-primary" id="submitButton">Save</button>
        </div>
    </div>

日历加载正常,模态对话框也加载正常,但是我无法在这个模态中加载下拉菜单

ok,我已经更改了您的导入,因为其中一些是错误的(错误的顺序),所以现在我们在这个plunker的控制台上得到了一个完整的日历,没有错误,如果我理解正确,您想调用$scope.selectBranch = function() {...}并从$http获得所有早午餐?当ng-change="selectBranch()"被触发?!但是selectBrunch永远不会被触发,因为下拉菜单中没有任何变化。在使用ng-change之前,您需要加载您的"组织"。

如果你想使用$http填充你的你可以检查Typeahead,希望它有帮助,请告诉我,如果你需要一些帮助

最新更新