Angular-UI多個日期選擇器內部表單控制器

Question

我正在創建一個包含多個angular-ui日期選擇器和一些輸入數據的表單。 對於日期選擇器，我創建了一個控制器和父窗體控制器，如下面給出的示例。表單控制器具有包含日期​​選擇器日期的模型。

JS：

var app = angular.module('app', ['ui.bootstrap']); 

app.controller('dateCntrl', function($scope,$timeout){ 
    $scope.open = function() { 
     $timeout(function() { 
      $scope.opened = true; 
     }); 
    }; 
}); 

app.controller('formCntrl', function($scope, $http){ 
    $scope.model = {name:'', startDate:'', endDate:''}; 
}); 

HTML：

<form ng-controller="formCntrl"> 
    <input type="text" id="name" placeholder="Name" ng-model="model.name" /> 
    <div ng-controller="dateCntrl"> 
     <input datepicker-popup="dd-MMMM-yyyy" ng-model="model.startDate" id="startDate" type="text" /> 
     <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button> 
    </div> 
    <div ng-controller="dateCntrl"> 
     <input datepicker-popup="dd-MMMM-yyyy" ng-model="model.endDate" id="endDate" type="text" /> 
     <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button> 
    </div> 
</form> 

• 難道我要在具有對日期選擇單獨的控制器的正確方法。這將作爲所有日期輸入的通用控制器
• 如果是，是否有可能具有將日期選擇器控制器中的數據綁定回模型日期的通用方法（model.startDate，model.endDate，在這種情況下）在父控制器中。
• 有沒有其他方法可以解決這個問題。

感謝和問候。

Answer 1

應該已經閱讀更多關於scope inheritance

父範圍值可以使用$父

<form ng-controller="formCntrl"> 
    <input type="text" id="name" placeholder="Name" ng-model="model.name" /> 
    <div ng-controller="dateCntrl"> 
     <input datepicker-popup="dd-MMMM-yyyy" ng-model="$parent.model.startDate" id="startDate" type="text" /> 
     <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button> 
    </div> 
    <div ng-controller="dateCntrl"> 
     <input datepicker-popup="dd-MMMM-yyyy" ng-model="$parent.model.endDate" id="endDate" type="text" /> 
     <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button> 
    </div> 
</form> 

Answer 2

其他解決方案進行訪問，宣佈日期選擇的open（）方法在$ rootScope，它可全申請。

HTML：

<div ng-app="myApp"> 
    <div ng-controller="DemoController"> 

     <div> 
     <input type="text" name="salesEndDate" id = "salesEndDate" datepicker-popup="dd-MM-yyyy" ng-model="salesEndDate" datepicker-options="dateOptions"/> 
     <button id="salesEndDateCal" ng-click="datePickerOpen('salesEndDate')"><i class="icon-calendar"></i></button> 
     </div> 

    <div> 
     <input type="text" name="salesStartDate" id = "salesStartDate" datepicker-popup="dd-MM-yyyy" ng-model="salesStartDate" datepicker-options="dateOptions"/> 
     <button id="salesEndDateCal" ng-click="datePickerOpen('salesStartDate')"><i class="icon-calendar"></i></button> 
    </div> 
</div> 
</div> 

的Javascript：

var myApp = angular.module('myApp',['ui.bootstrap','ui.bootstrap.datepicker']); 


function DemoController($scope,$timeout,$rootScope) { 


$rootScope.datePickerOpen = function(id) { 

      $timeout(function() { 
        $("#"+id).focus(); 
       });  
     }; 
} 

的jsfiddle鏈接http://jsfiddle.net/angles_k/s7yZm/21/

Answer 3

我把所有的代碼從冗長的例子在這裏：http://angular-ui.github.io/bootstrap/#/datepicker &纏到我自己的指令。這樣，我可以將無限制的日期選擇器放入我的頁面，併爲每個綁定的模型指定模型。我沒有管理通過重複設置，或者再追蹤「開」的狀態中設置唯一的變量，我只是把1行代碼：

<div my-date-picker my-date-picker-model="myDate1"></div> 
<div my-date-picker my-date-picker-model="myDate2"></div> 
<div my-date-picker my-date-picker-model="myDate3"></div> 

然後，用戶可以切換每個日期選擇器開/常閉，並且這些值將被適當地更新爲myDate1,myDate2,& myDate3。打開/關閉狀態現在封裝在指令中，並且不在意。

爲了實現該指令，我將'JS'選項卡的代碼複製到它的控制器中，並將'標記'選項卡的代碼複製到它的模板中。在最後加入我的代碼1個比特來更新值到父範圍：

$scope.$watch('dt', function(newVal, oldVal) { 
    $scope.myDatePickerModel = newVal; 
}); 

在所述控制器開始時，我改變$範圍。今天從父範圍初始化的，而不是使用系統時鐘的值，：

$scope.init = function() { 
    $scope.dt = $scope.hxDatePickerModel; 
}; 
$scope.init(); 

的指令使用的分離物的範圍，和在其上定義父範圍的模型中的屬性的2路結合：

scope: { 
    myDatePickerModel: '=' 
} 

這裏的指令的全碼：

app.directive('myDatePicker', function() { 

    function link(scope, element, attrs) { 
    } 

    function controller($scope) { 
     $scope.init = function() { 
     $scope.dt = $scope.myDatePickerModel; 
    }; 
    $scope.init(); 

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

     // Disable weekend selection 
     $scope.disabled = function(date, mode) { 
      return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); 
     }; 

     $scope.toggleMin = function() { 
      $scope.minDate = $scope.minDate ? null : new Date(); 
     }; 
     $scope.toggleMin(); 

     $scope.open = function($event) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 

      $scope.opened = true; 
     }; 

     $scope.dateOptions = { 
      formatYear: 'yy', 
      startingDay: 1 
     }; 

     $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
     $scope.format = $scope.formats[0]; 

    $scope.$watch('dt', function(newVal, oldVal) { 
     $scope.myDatePickerModel = newVal; 
    }); 

    } 

    return { 
     restrict: 'A', 
     templateUrl: 'datepicker.html', 
     link: link, 
     controller: controller, 
     scope: { 
      myDatePickerModel: '=' 
     } 
    } 
}); 

這裏是datepicker.html完整的代碼，該指令的模板：

<p class="input-group"> 
    <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> 
     <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
     </span> 
</p>