4

我正在创建一个包含多个 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>
  • 我在为日期选择器设置单独的控制器方面是否正确。这将作为所有日期输入的通用控制器
  • 如果是，是否有可能有一种通用的方式将 datepicker 控制器中的数据绑定回父控制器中的模型日期（在本例中为 model.startDate，model.endDate）。
  • 有没有其他方法可以解决这个问题。

谢谢并恭祝安康。

4

3 回答 3

11

应该阅读更多关于范围继承的信息

可以使用 $parent 访问父范围值

<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>
于 2013-08-16T16:33:43.303 回答
4

我从这里的详细示例中获取了所有代码：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.today 以从父范围初始化值，而不是使用系统时钟：

$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>
于 2014-10-30T21:57:36.483 回答
0

其他解决方案，在 $rootScope 中声明 datepicker 的 open() 方法，它在整个应用程序中都可用。

网页：

<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/

于 2014-01-31T14:56:32.023 回答