Question

我正在构建一个应用程序，该应用程序在几个位置使用Angular UI Bootstrap的日期选择器。我已经包含了一些其他的增强功能，例如验证样式，并希望在任何地方传播它，所以我把它放在一个指令中。

app.controller('DateController', function () {

    var vm = this;

    vm.status = {
        opened: false
    };

    vm.open = open;

    function open($event) {
        vm.status.opened = true;
    }
});

app.directive('customDatePicker', function () {
    return {
        restrict: 'E',
        scope: {
            name: '=',
            bindingProperty: '=',
            minDate: '=',
            maxDate: '=',
            maxMode: '=',
            format: '=',
            isRequired: '=',
            form: '='
        },
        templateUrl: "/Scripts/SharedAngular/Templates/datePicker.html"
    };
});

模板URL代码如下：

<div ng-controller="DateController as datePicker">
    <p class="input-group">
        <input type="text" id="{{ name }}_datePicker" name="{{ name }}_datePicker" class="form-control" max-mode="maxMode" datepicker-popup="{{format}}" ng-model="bindingProperty" min-date="minDate" max-date="maxDate" ng-required="isRequired" close-text="Close" is-open="datePicker.status.opened" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="datePicker.open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
        <span ng-show="form.{{ name }}_datePicker.$invalid && form.{{ name }}_datePicker.$dirty" class="glyphicon glyphicon-exclamation-sign form-control-feedback datepicker-error-icon"></span>
    </p>
</div>

我在几个地方都包含这个指令。它被放置在不同控制器范围内的页面上，如下所示：

<div ng-controller="myController as ctrl">
    <custom-date-picker name="'somePrefix'" form="myForm" binding-property="ctrl.date" max-mode="'month'" max-date="ctrl.currentDate" format="'yyyy/MM/dd'" is-required="true"></custom-date-picker>
</div>

所以，我想从myController获取一个属性，并将其双向绑定到指令的日期选择器。但是，最终实际发生的是ctrl.date属性的当前值传递给datepicker，但是不会发回对该指令中发生的值的任何更改。因此，myController和DateController似乎只传递单向值，并且只有在将指令加载到页面上时才会传递。要明确的是，该指令似乎并不是我的问题的根源，因为将模板中的HTML代码直接放到我的页面上会导致相同的行为。因此，问题似乎是由于使用了两个不同的控制器。

以前，我在模板代码和主页面上的指令中都使用了ng-model。这两种选择似乎都不起作用。我对如何将我的指令输入发送回myController的任何想法持开放态度。

Answer 1

我想出了如何完全抛弃DateController。我通过ng-click和ng-init将表达式直接放入模板元素中。输入创建一个名为opened的属性，并使用ng-init将其初始化为false。然后，它将该属性用于datepicker的is-open属性。然后该按钮只使用ng-click="opened=true"。绝对简化了事情，并删除了控制器的嵌套。

指令：

app.directive('customDatePicker', function () {
    return {
        restrict: 'E',
        scope: {
            name: '=',
            bindingProperty: '=ngModel',
            minDate: '=',
            maxDate: '=',
            maxMode: '=',
            format: '=',
            isRequired: '=',
            form: '='
        },
        require: 'ngModel',
        templateUrl: "/Scripts/SharedAngular/Templates/datePicker.html"
    };
});

模板：

<p class="input-group">
    <input type="text" id="{{ name }}_datePicker" name="{{ name }}_datePicker" class="form-control" max-mode="maxMode" datepicker-popup="{{format}}" ng-model="bindingProperty" min-date="minDate" max-date="maxDate" ng-required="isRequired" close-text="Close" is-open="opened" ng-init="opened=false" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="opened=true"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
    <span ng-show="form.{{ name }}_datePicker.$invalid && form.{{ name }}_datePicker.$dirty" class="glyphicon glyphicon-exclamation-sign form-control-feedback datepicker-error-icon"></span>
</p>

使用指令：

<div ng-controller="MyController as ctrl">
    <custom-date-picker name="'somePrefix'" form="myForm" ng-model="ctrl.Date" max-mode="'month'" max-date="ctrl.currentDate" format="'yyyy/MM/dd'" is-required="true"></custom-date-picker>
</div>

来自专用控制器的输入值不会被发送回主控制器

1 个答案: