javascript - 如何通过调用 Controller 访问指令中 Controller 的属性

Question

我对 Angular 还很陌生，但正在尝试从另一个 Controller (指令的父包装 Controller )内的指令 Controller 访问名为 hour 的属性。

以下是我设置指令及其 Controller 的方法:

(function () {

    angular.module("datePicker", [])
        .directive("datePicker", function () {

            return {
                restrict: "E",
                scope: {
                    ctrl: '=ctrl'
                },
                templateUrl: "app/views/datepicker.html"
            };
        })
        .controller('datePickerController', function ($scope) {
            this.min = "";
            this.hour = "";
            this.minutes = [];
            this.hours = [];
            let i = 0;
            for (i; i < 60; i++) {
                let time = "";
                if (i <= 9) {
                    time = "0" + i;
                } else time = i;
                this.minutes.push(time);
                if (time <= 23) {
                    this.hours.push(time);
                }
            }

            $scope.somechange = function (v) {
                alert(v);
                $scope.hour = v;
                $scope.$parent.printFrom = "It changed";
            }
        });
})();

这是指令的实现:

<div ng-controller="datePickerController as ctrl">
    <md-input-container>
        <label>Hour</label>
        <md-select ng-change="somechange(ctrl.hour)" ng-model="ctrl.hour">
            <md-option ng-repeat="hour in ctrl.hours" ng-value="hour">
                {{ hour }}
            </md-option>
        </md-select>
    </md-input-container>
</div>

以及如何从“父级”调用它:

<div>
    <date-picker ctrl="from"></date-picker> {{ from.today | date:'short' | split:' ':0}}, {{ $scope.hour }}
</div>

如您所见，我正在尝试从日期选择器的范围访问小时属性，但我无法访问它(或者至少它没有更新)。

我可以在 ng-change 事件中调用的 alert 中看到它，但我似乎无法在父级范围内找到它。 .

Answer 1

您必须在父对象上添加属性 hour。

Controller 和指令的代码:

var app = angular.module('datepicker', []);

app.controller('ParentController', function($scope) {
  $scope.parent = {};
});

app.directive('datePicker', function () {
    return {
        restrict: 'E',
        scope: {
            parent: '='
        },
        templateUrl: 'app/views/datepicker.html'
    };
})
.controller('datePickerController', function ($scope) {
    this.min = '';
    this.hour = '';
    this.minutes = [];
    this.hours = [];
    let i = 0;
    for (i; i < 60; i++) {
        let time = '';
        if (i <= 9) {
            time = '0' + i;
        } else time = i;
        this.minutes.push(time);
        if (time <= 23) {
            this.hours.push(time);
        }
    }

$scope.somechange = function (v) {
    alert(v);
    $scope.parent.hour = v;
    $scope.$parent.printFrom = 'It changed';
  }
});

将指令创建为 html 元素:

<date-picker parent="parent"></date-picker>
<p>{{parent.hour}}</p>