Angularjs 来自专用控制器的输入值为'；t被送回主控制器

我正在构建一个应用程序，它在几个地方使用AngularUI引导的日期选择器。我已经包括了一些其他的增强功能，比如验证样式，并且希望将它传播到任何地方，所以我将它放在了一个指令中

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模型。这两种选择似乎都不起作用。关于如何从指令中获取输入并将其发送回

myController

，我愿意接受任何想法。我想出了如何完全抛弃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>