Angularjs Fabrikdaten oder Objekt nicht direkt in der Steuerung zugreifen

Question

Ich habe gerade eine Angular JS-Fabrik erstellt (unten ist der Code), die Daten für zwei datepickers (ui.bootstrap's Elemente) zurückgibt und an meinen HTML-Code binden, aber wenn ich bin versuchen, die Rückkehr $scope Objekt von der Fabrik in der Steuerung zu ändern es funktioniert nicht, ich meine, ich kann nicht auf die $scope.Date1 oder $scope.Date2 Objekte zugreifen, die in der Steuerung verfügbar sind (von der Fabrik zurückgegeben).

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

Sie konstruiert sehr seltsam Ihre Fabrik return-Anweisung. Statt dessen:

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

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

     //etc functions 
    } 
    } 
} 

Versuchen Sie es stattdessen.

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

Beachten Sie, dass der Zweck der Fabrik ist, ein Objekt zurückzugeben, das all Ihre Logik und Variablen enthält.

Auf diese Weise können Sie die Variablen Date1 und Date2 von der Fabrik und in allen Steuerungen verwenden, die Sie ab Werk unter Verwendung von verwenden.

Code (die Grundlagen zumindest) Am Ende

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 wie diese aussehen wird, die Ihnen helfen können.