Question

我实际上在模块运行时提供了$rootScope，它可以从视图中完全访问，但我想在另一个控制器中访问该值，遗憾的是我无法访问它。请提出一些建议。

我之前曾试图通过该服务提供这些日期选择器弹出选项，但未能做到这一点，因为我不知道服务/工厂如何使用它们。更重要的是，我在视图中获得了更新的值，但我在控制器中获得了相同的更新值，因此可以将其分配给不同的范围变量。如果有人可以在服务中为我制作以下代码，那么至少我会明白并开始创建其他注射服务。

＆＃13;

angular.module("TestApp", ["ui.bootstrap"])
.run(['$rootScope', function ($rootScope) {

        $rootScope.clear = function () {
            $rootScope.Date1 = null;
            $rootScope.Date2 = null;
            $rootScope.Date1();
        };


        $rootScope.inlineOptions1 = {
            customClass: getDayClass,
            minDate: new Date(),
            //    showWeeks: true

        };

        $rootScope.inlineOptions2 = {
            customClass: getDayClass,
            minDate: new Date(),
            //    showWeeks: true
        };

        $rootScope.dateOptions1 = {
            //dateDisabled: disabled,
            formatYear: 'yyyy',
            maxDate: new Date(2050, 7, 22),
            minDate: new Date(),

            startingDay: 1
        };

        $rootScope.dateOptions2 = {
            //dateDisabled: disabled,
            formatYear: 'yyyy',
            maxDate: new Date(2050, 5, 22),
            minDate: new Date(),

            //minDate: new Date($$rootScope.changeMin()),
            startingDay: 1
        };


        $rootScope.toggleMin = function () {

            $rootScope.inlineOptions1.minDate = $rootScope.inlineOptions1.minDate ? null : new Date();
            $rootScope.dateOptions1.minDate = $rootScope.inlineOptions1.minDate;

            var min2 = new Date();

            $rootScope.$watch('Date1', function () {
                min2 = $rootScope.Date1;
                $rootScope.dateOptions2.minDate = min2;

                if ($rootScope.Date1 > $rootScope.Date2) {
                  
                    $rootScope.Date2 = $rootScope.Date1;
                  
                }
                

            }, true);


            $rootScope.$watch('Date2', function () {

                if ($rootScope.Date2 < $rootScope.Date1) {
                  
                    $rootScope.Date1 = $rootScope.Date2;
                  
                }
                

            }, true);
        };

        $rootScope.toggleMin();
        $rootScope.open1 = function () {
            $rootScope.popup1.opened = true;
        };

        $rootScope.open2 = function () {
            $rootScope.popup2.opened = true;
        };

        $rootScope.popup1 = {
            opened: false

        };

        $rootScope.popup2 = {
            opened: false
        };

        $rootScope.setDate = function (year, month, day) {
            $rootScope.Date1 = new Date(year, month, day);
            $rootScope.Date2 = new Date(year, month, day);

        };

        $rootScope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd-MM-yyyy', 'shortDate'];
        $rootScope.format = $rootScope.formats[2];
        $rootScope.altInputFormats = ['M!/d!/yyyy'];

        function getDayClass(data) {
            var date = data.date,
              mode = data.mode;
            if (mode === 'day') {
                var dayToCheck = new Date(date).setHours(0, 0, 0, 0);

                for (var i = 0; i < $rootScope.events.length; i++) {
                    var currentDay = new Date($rootScope.events[i].date).setHours(0, 0, 0, 0);

                    if (dayToCheck === currentDay) {
                        return $rootScope.events[i].status;
                    }
                }
            }

            return '';
        }

    }]);


//This is my Controller

angular.module('TestApp').controller('MyDates', ['$scope', '$log', '$rootScope', function ($scope, $log, $rootScope) {


    $scope.dt1 = $rootScope.Date1;
     

    
    console.log($scope.dt1); //Not showing anything....
    console.log($rootScope.Date1);
}]);

＆＃13;

<script src="~/Scripts/fromscript.js"></script>
<fieldset>
    <form name="MeForm" novalidate>
        <div ng-controller="MyDates">



            <div class="row">
                <div class="col-md-3">
                    <div>
                        <p class="input-group">

                            <input type="text" name="fdate"
                                   class="form-control"
                                   uib-datepicker-popup="{{$root.format}}"
                                   ng-model="$root.Date1" is-open="$root.popup1.opened"
                                   datepicker-options="$root.dateOptions1"
                                   ng-required="true"
                                   close-text="Close"
                                   alt-input-formats="$root.altInputFormats" />

                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        <p class="error validationerror" ng-show="MeForm.fdate.$invalid && MeForm.fdate.$touched">First date is required</p>

                        </p>
                    </div>
                    {{Date1 | date: 'dd-MM-yyyy'}}


                    <div>

                        <p class="input-group">
                            <input type="text" name="ldate"
                                   class="form-control"
                                   uib-datepicker-popup="{{$root.format}}"
                                   ng-model="$root.Date2" is-open="$root.popup2.opened"
                                   datepicker-options="$root.dateOptions2"
                                   ng-required="true"
                                   close-text="Close"
                                   alt-input-formats="$root.altInputFormats" />

                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        <p class="error validationerror" ng-show="MeForm.ldate.$invalid && MeForm.ldate.$touched">Last date is required</p>

                        </p>
                    </div>
                    {{Date2 | date: 'dd-MM-yyyy'}}
                </div>

            </div>

        </div>

        
    </form>
</fieldset>

＆＃13;

Answer 1

使用服务非常简单。看看下面的例子。

var testModule = angular.module('testmodule', []);

testModule
   .controller('QuestionsStatusController1',['$rootScope', '$scope', 'myservice', function ($rootScope, $scope, myservice) {
       $scope.myservice = myservice;
   }]);

testModule
   .controller('QuestionsStatusController2',['$rootScope', '$scope', 'myservice',function ($rootScope, $scope, myservice) {
       $scope.myservice = myservice;
   }]);

testModule
    .service('myservice', function() {
       this.xxx = "yyy";
    });

Plunker

$ rootScope无法在控制器中访问

1 个答案: