如何将值从控制器中的模型传递给 angularjs 中的其他子控制器？

Question

我正在使用 AngularJS-UI 日期选择器。这是 HTML:

<div class="form-inline date-picker" ng-show="is('home')">
            <div class="form-inline input-group">
                <input type="month" class="form-control" uib-datepicker-popup ng-model="selectedDate" is-open="status.opened" min-date="reportDate.minDate" max-date="reportDate.maxDate" close-text="Close" /><p>{{ dt }}</p>

                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>               
            </div>
        </div>

我的控制器：

var mainController = monthlyReportApp.controller('MainController', ['$scope', 'ReportDateService', '$state', function ($scope, ReportDateService, $state) {

    $scope.is = function (name) {
        return $state.is(name);
    }

    $scope.selectedDate = new Date();


    $scope.reportDate = [];
    $scope.currentMonth = 0;

    loadRemoteData();

    function loadRemoteData() {
        ReportDateService.list().then(function (response) {
            $scope.reportDate = response;
        });

    }

    $scope.getMonth = function () {

       console.log(angular.isDefined($scope.selectedDate) ? $scope.selectedDate.getMonth() : "nothing");
    }

    $scope.clear = function () {
        $scope.selectedDate = null;
    };

    $scope.open = function($event) {
        $scope.status.opened = true;
    };

    $scope.status = {
        opened: false
    };

    $scope.$watch($scope.selectedDate, function (newVal, oldVal) {
        console.log($scope.selectedDate.toDateString());
    })

}]);

日期选择器显示正常，输入显示所选的月份和年份。

我现在需要做的是将选择的月份和年份传递给其他子控制器——有很多。但出于某种原因，我什至无法让所选的月份和年份出现在上面显示的父控制器中。我究竟做错了什么？

当我在日期选择器正下方输出像 {{ selectedDate }} 这样的模型时，会显示该值。

Answer 1

首先，永远不要对类似的东西使用 $rootScope。

其次，问题是您将日期存储在控制器的作用域中，而不是对象中。您需要了解范围如何在 Angular 中继承。更具体地说，您运行进入 this issue。

快速而肮脏的解决方案是执行 $scope.data = {}; data.date = new Date()，然后将 ng-model="selectedDate" 更改为 ng-model="data.date"，您的对象将正确继承。

如何将值从控制器中的模型传递给 angularjs 中的其他子控制器？

How to pass value from a model in controller to other child controllers in angularjs?

datepicker

angularjs

angular-ui-bootstrap