0
I am using here two ng-apps and controllers. When I try to implement the angular ui bootstrap datepciker it is giving me the following error, 

错误:[NG:AREQ] http://errors.angularjs.org/1.4.4/ng/areq?p0=DatepickerDemoCtrl&p1=not%20a%20function%2C%20got%20undefinedAngularJs UI引导日期选择器不工作

不限如何,如果我外面是工作从“firstApp” div元素和地方除去。 这段代码出了什么问题。我们可以在angularjs中调用其他应用程序模块中的一个应用程序模块。

<div ng-app="FirstModule" ng-controller="FirstController"> 

      <div class="" ng-not-bindable ng-app="calPicker" ng-controller="DatepickerDemoCtrl"> 
           <p class="input-group"> 
               <label for="date-picker" ng-click="open($event)">Choose a date</label> 
               <input type="text" class="form-control" 
                 datepicker-popup="{{format}}" 
                 ng-model="dt" 
                 is-open="opened" 
                 min-date="minDate" 
                 max-date="'2015-06-22'" 
                 datepicker-options="dateOptions" 
                 date-disabled="disabled(date, mode)" 
                 ng-required="true" 
                 close-text="Close" 
                 id="date-picker" 
                 readonly 
                 ng-click="open($event)" /> 
               <span class="input-group-btn pull-left"> 
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
               </span> 
              </p> 
             </div> 

    </div> 

这里是datetimepicker.js文件代码

var calPicker = angular.module("calPicker", ["ui.bootstrap"]); 

calPicker.controller("DatepickerDemoCtrl", ["$scope", function ($scope) { 

    // grab today and inject into field 
    $scope.today = function() { 
    $scope.dt = new Date(); 
    }; 

    // run today() function 
    $scope.today(); 

    // setup clear 
     $scope.clear = function() { 
     $scope.dt = null; 
     }; 

     // open min-cal 
    $scope.open = function ($event) { 
     alert("hi"); 
    $event.preventDefault(); 
     $event.stopPropagation(); 
     $scope.opened = true; 
    }; 

    // handle formats 
    $scope.formats = ["dd-MMMM-yyyy", "yyyy/MM/dd", "dd.MM.yyyy", "shortDate"]; 

    // assign custom format 
    $scope.format = $scope.formats[0]; 

    }]); 

回答

0

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

所以,你可以在这里做或者是您使用angular.bootstrap和手动初始化模块。或者您可以创建顶级模型,并使用其控制器创建两个其他模型,然后将它们作为顶级模型中的依赖项加载。之后,您将只有一个顶级模型ng-app

又见