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

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>

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

Input value from a specialized controller isn't being sent back to the main controller

angularjs

angularjs-directive

angular-ui-bootstrap