Angularjs工廠數據或無法訪問對象直接

Question

我剛剛創建了一個角JS廠（以下是代碼），這兩個datepickers（ui.bootstrap的元素）返回數據控制器內並綁定到我的HTML代碼，但是當我試圖修改它不工作控制器內的工廠返回$scope對象，我的意思是我無法訪問$scope.Date1或$scope.Date2對象，其可在控制器內（從工廠返回）。

var MyApp = angular.module("TestApp", ["ui.bootstrap"]); 

angular.module('TestApp').factory('FirstFactory', function() { 

    return { 
    TwoDates: function(scope) { 

     scope.clear = function() { 
     scope.Date1 = null; 
     scope.Date2 = null; 
     }; 


     scope.inlineOptions1 = { 
     customClass: getDayClass, 
     minDate: new Date(), 
     // showWeeks: true 

     }; 

     scope.inlineOptions2 = { 
     customClass: getDayClass, 
     minDate: new Date(), 
     // showWeeks: true 
     }; 

     scope.dateOptions1 = { 
     //dateDisabled: disabled, 
     formatYear: 'yyyy', 
     maxDate: new Date(2050, 7, 22), 
     minDate: new Date(), 

     startingDay: 1 
     }; 

     scope.dateOptions2 = { 
     //dateDisabled: disabled, 
     formatYear: 'yyyy', 
     maxDate: new Date(2050, 5, 22), 
     minDate: new Date(), 

     //minDate: new Date($scope.changeMin()), 
     startingDay: 1 
     }; 


     scope.toggleMin = function() { 

     scope.inlineOptions1.minDate = scope.inlineOptions1.minDate ? null : new Date(); 
     scope.dateOptions1.minDate = scope.inlineOptions1.minDate; 

     var min2 = new Date(); 

     scope.$watch('Date1', function() { 
      min2 = scope.Date1; 
      scope.dateOptions2.minDate = min2; 

      if (scope.Date1 > scope.Date2) { 
      // debugger; 
      scope.Date2 = scope.Date1; 
      console.log("Yes It's greater"); 
      } 
      // console.log(min2); 

     }); 


     scope.$watch('Date2', function() { 

      if (scope.Date2 < scope.Date1) { 
      //debugger; 
      scope.Date1 = scope.Date2; 
      console.log("Yes It's lesser"); 
      } 
      // console.log(max1); 

     }); 
     }; 

     scope.toggleMin(); 
     scope.open1 = function() { 
     scope.popup1.opened = true; 
     }; 

     scope.open2 = function() { 
     scope.popup2.opened = true; 
     }; 

     scope.popup1 = { 
     opened: false 

     }; 

     scope.popup2 = { 
     opened: false 
     }; 

     scope.setDate = function(year, month, day) { 
     scope.Date1 = new Date(year, month, day); 
     scope.Date2 = new Date(year, month, day); 

     }; 

     scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd-MM-yyyy', 'shortDate']; 
     scope.format = scope.formats[2]; 
     scope.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 < scope.events.length; i++) { 
      var currentDay = new Date(scope.events[i].date).setHours(0, 0, 0, 0); 

      if (dayToCheck === currentDay) { 
       return scope.events[i].status; 
      } 
      } 
     } 

     return ''; 
     } 
    } 
    }; 
}); 


angular.module('TestApp').controller('StartDate', function($scope, $log, FirstFactory) { 

    //debugger; 
    FirstFactory.TwoDates($scope); 

    //or 
    console.log($scope.Date1); 
}); 

<fieldset> 
    <form name="MeForm" novalidate> 
    <div ng-controller="StartDate"> 
     <div class="row"> 
     <div class="col-md-3"> 
      <div> 
      <p class="input-group"> 

       <input type="text" name="fdate" class="form-control" uib-datepicker-popup="{{format}}" ng-model="Date1" is-open="popup1.opened" datepicker-options="dateOptions1" ng-required="true" close-text="Close" alt-input-formats="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> 

      <input type="text" [ng-value="Date1" ] />@*{{Date1 | date: 'dd-MM-yyyy'}}*@ 


      <div> 

      <p class="input-group"> 
       <input type="text" name="ldate" class="form-control" uib-datepicker-popup="{{format}}" ng-model="Date2" is-open="popup2.opened" datepicker-options="dateOptions2" ng-required="true" close-text="Close" alt-input-formats="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> 

    <div> 

     <input type="text" name="firstname" ng-required="true" ng-model="user.firstname" placeholder="Enter your first name" class="form-control" /> 
     <p class="error validationerror" ng-show="MeForm.firstname.$invalid && MeForm.firstname.$touched">You must fill out your first name</p> 


     <br /> 
     <input type="text" name="lastname" ng-required="true" ng-model="user.lastname" placeholder="Enter your first name" class="form-control" /> 
     <p class="error validationerror" ng-show="MeForm.lastname.$invalid && MeForm.lastname.$touched">You must fill out your last name</p> 

     <br /> 

     <button type="submit" class="btn submitbtn">Submit</button> 
    </div> 

    </form> 
</fieldset> 

Answer 1

您構建了您的工廠return語句很奇怪。取而代之的是：

angular.module('TestApp').factory('FirstFactory', function() { 
    return { 
    TwoDates: function(scope) { 

     scope.example = function() { 
     //logic 
     } 

     //etc functions 
    } 
    } 
} 

請嘗試像這樣而不是。

angular.module('TestApp').factory('FirstFactory', function() { 

    var Date1 = 0; 
    var Date2 = 0; 

    TwoDates.example = function(){ 
    //logic on Date1 or Date2 
    } 

    //TwoDates.exampleFunction = function(){.... 

    return TwoDates; //Important! 
} 

請注意，工廠的目的是返回一個包含所有邏輯和變量的對象。

通過這種方式，您可以使用工廠內和工廠中使用factoryInstance.getDate1的任何控制器中的Date1和Date2變量。

最終你的代碼（至少是很基本的）看起來像這樣

var MyApp = angular.module("TestApp", ["ui.bootstrap"]); 

angular.module('TestApp').factory('FirstFactory', function() { 
    var Date1 = 0; 
    var Date2 = 0; 

    TwoDates.incrDate1 = function(){ 
    Date1 += 1; 
    } 

    TwoDates.getDate1 = function(){ 
    return Date1; 
    } 

    return TwoDates; 
} 

angular.module('TestApp').controller('StartDate', function($scope, FirstFactory) { 

    //get *function* that returns variables from Factory 
    //notice that I don't use FF.getDate1(), but instead pass the function without invoking it 
    $scope.getDate1 = FirstFactory.getDate1; //<-- no() 

    console.log($scope.getDate1); // 0 

    FirstFactory.incrDate1(); // calls Factory method, uses Date1 variable 

    console.log($scope.getDate1); // 1 

    //you can also add other factory functions to your scope so you can use them in the html 
    $scope.incrDate1 = FirstFactory.incrDate1(); 
}); 

Here's another stackoverflow question，可能會幫助你。