$ rootScopeがコントローラでアクセスできない

Question

実際には、モジュールの実行時にビューから完全にアクセスできる$rootScopeを利用できましたが、別のコントローラ内のその値にアクセスしたいと思いますが、残念ながらアクセスできません。何らかの方法を提案してください。

1. 私は以前にサービスを通じてこれらのDatePickerのポップアップオプションがavailbleで作ってみましたが、私はどのようにそれらを使用するためのサービス/工場については考えているようにそれを行うことができませんでした。もっと重要なのは、私はビューで更新された値を取得していますが、別のスコープ変数に割り当てることができるように、私のコントローラでは同じ更新値が必要です。 誰かが私のために以下のコードをサービスの中に作って、少なくとも私がそのアイデアを得て、他の注射可能なサービスを作り始めたら、

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); 
 
}]);

<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>

Answer 1

これは、サービスを利用することは非常に簡単です。次の例を見てください。

Plunker