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

时间:2015-11-05 21:56:58

标签: angularjs datepicker angular-ui-bootstrap

我正在使用AngularJS-UI Datepicker。这是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());
    })

}]);

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

我现在需要做的是选择的月份和年份应该传递给其他子控制器 - 有很多。但由于某些原因,我甚至无法使所选的月份和年份出现在上面显示的父控制器中。我究竟做错了什么?

当我在datepicker正下方输出{{ selectedDate }}之类的模型时,会显示该值。

1 个答案:

答案 0 :(得分:1)

首先,不要使用$ rootScope这样的东西。

其次,问题是您将日期存储在控制器的范围而不是对象中。您需要了解范围在Angular中的继承方式。更具体地说,您正在遇到this issue

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