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

又見

相關問題