来自专用控制器的输入值未发送回主控制器

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 属性的当前值被传递给日期选择器，但指令中发生的对该值的任何更改都不会被发回。因此，myController 和 DateController 似乎只传递值单向，并且仅在指令加载到页面上时才传递。需要明确的是，该指令似乎不是我问题的根源，因为将模板中的 HTML 代码直接放到我的页面上会导致相同的行为。因此，问题似乎是由于使用了两个不同的控制器。

以前，我在模板代码和主页上的指令中都使用了 ng-model。这两种选择似乎都不起作用。我愿意接受有关如何从我的指令中获取输入以发送回myController 的任何想法。

Answer 1

我想出了如何完全抛弃 DateController。我通过ng-click 和ng-init 将我的表达式直接放入模板元素中。输入创建一个名为opened 的属性，并使用ng-init 将其初始化为false。然后它将该属性用于日期选择器的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>