javascript - 从父 Controller 访问指令的属性

Question

我有一个 datetime 指令，其范围内包含两个属性:date 和 time。如何从父 Controller 访问这些属性？我尝试这样做

<div id="inputs" ng-controller="InputCtrl">
    Start: <datetime ng-model="start"></datetime>
    End: <datetime ng-model="end"></datetime>

    You have chosen to start on {{start.date}}, {{start.time}} 
    and end on {{end.date}}, {{end.time}}.
</div>

start.date、start.time、end.date 和 end.time 的值当我更改输入时，不会填充。如何从父 Controller 访问指令范围？

这是我的指令代码:

angular.module("components", [])
    .directive("datetime", function () {
        return {
            restrict: 'E',
            scope: {},
            controller: function ($scope) {
                $scope.time = "12:00 PM";
                $scope.date = "12/01/2013";
            },
            template: 
                '<div><div class="control-group input-append">' +
                '<input class="input-small" type="text" ng-model="date" data-date-format="mm/dd/yyyy" bs-datepicker>' +
                '<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>' +
                '</div>' +
                '<div class="control-group input-append">' +
                '<input type="text" class="input-small" ng-model="time" bs-timepicker>' +
                '<button type="button" class="btn" data-toggle="timepicker"><i class="icon-time"></i></button>' +
                '</div></div>',
            replace: true
        };
    });

Answer 1

您应该将指令范围变量绑定(bind)到指令属性，如下所示:

angular.module("components", [])
    .directive("datetime", function () {
        return {
            restrict: 'E',
            scope: {
                model: "=ngModel"
            },
            controller: function ($scope) {
                $scope.model.time = "12:00 PM";
                $scope.model.date = "12/01/2013";
            },
            template: 
                '<div><div class="control-group input-append">' +
                '<input class="input-small" type="text" ng-model="date" data-date-format="mm/dd/yyyy" bs-datepicker>' +
                '<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>' +
                '</div>' +
                '<div class="control-group input-append">' +
                '<input type="text" class="input-small" ng-model="time" bs-timepicker>' +
                '<button type="button" class="btn" data-toggle="timepicker"><i class="icon-time"></i></button>' +
                '</div></div>',
            replace: true
        };
    });

"=ngModel" 表示您将隔离作用域中的 model 绑定(bind)到父作用域中的 ng-model 中的变量。