Angular JS双方向バインディングが$ rootScopeでも動作しない

双方向バインディングが機能していない、それが継承されたスコープのためであったと私はrootScopeがrootScope全体に1つしかないので、アプリ。は今、私はあなたがいないここでは、事前に私のコードで私のコードを見て、間違っているものを私に教えてください

.directive('homePage', function() { 
 
    return { 
 
    restrict: 'E', 
 
    templateUrl: 'home-page.html', 
 
    controller: function($http, $rootScope, $scope) { 
 
     $rootScope.sbutton = false; 
 
     var today = new Date(); 
 
     var dd = today.getDate(); 
 
     var mm = today.getMonth() + 1; //January is 0! 
 
     var yyyy = today.getFullYear(); 
 
     if (dd < 10) { 
 
     dd = '0' + dd 
 
     } 
 
     if (mm < 10) { 
 
     mm = '0' + mm 
 
     } 
 

 
     today = yyyy + '-' + mm + '-' + dd; 
 
     document.getElementById("datefield").setAttribute("min", today); 
 

 
     //find function 
 
     this.find = function() { 
 
     $rootScope.dob = this.ldate; 
 
     $rootScope.sbutton = true; 
 
     var delay; 
 
     if (latitude === undefined || latitude === undefined) { 
 
      getLocation(); 
 
      delay = 6000; 
 
     } else { 
 
      delay = 0; 
 
     } 
 
     console.log("find run"); 
 
     //Validation Starts 
 
     console.log(delay) 
 
     setTimeout(function() { 
 
      if (latitude === undefined || latitude === undefined) { 
 
      alert("Please change your location settings to high accuracy mode"); 
 
      $rootScope.sbutton = false; //Doesn't work 
 

 
      console.log($rootScope.sbutton); 
 
      } else if ($rootScope.bgroup === undefined) { 
 
      alert("Please Select "); 
 
      $scope.sbutton = false; //Doesn't work 
 

 
      } else if ($rootScope.dob === undefined) { 
 
      alert("Please select a date"); 
 
      $scope.sbutton = false; //Doesn't work 
 

 
      } else { 
 
      //ajax start 
 
      $scope.finderloader = true; 
 

 
      console.log("Find run"); 
 
      $http({ 
 
       method: "POST", 
 
       url: "URL", 
 
       data: { 
 
       //data i sent 
 

 
       } 
 
      }).then(function mySucces(response) { 
 
       $scope.finderloader = false; 
 
       $scope.search = false; 
 
       $scope.myData = response.data.records; 
 
       $scope.sbutton = false; //WORKS! 
 

 
      }, function myError(response) { 
 
       $scope.hellow = response.statusText; 
 
       alert($scope.hellow); 
 
       $scope.sbutton = false; 
 

 
      }); 
 

 
      //ajax end 
 
      } 
 

 
     }, delay); 
 
     } 
 
    }, 
 
    controllerAs: 'home' 
 
    } 
 
})

<div ng-init="search=true;"> 
 
    <div id="search" ng-show="search"> 
 
    <ons-scroller> 
 
     <ons-list ng-controller="DialogController"> 
 
     <center><small>Request for blood</small> 
 
     </center> 
 

 
     <ons-list-item ng-click="show('abc.html')" tappable> 
 
      <p>Select</p> 
 
     </ons-list-item> 
 

 
     <ons-list-item> 
 
      <input placeholder="select date" id="datefield" ng-model="home.ldate" class="text-input text-input--transparent" type="text" onfocus="(this.type='date')" style="margin-top:8px; width: 100%;"> 
 

 
     </ons-list-item> 
 
     <div class="content-padded"> 
 
      <ons-button modifier="large" ng-click="home.find()" ng-disabled="sbutton"> 
 
      Search 
 
      </ons-button> 
 
      {{sbutton}} 
 
     </div> 
 
     </ons-list> 
 

 
    </ons-scroller> 
 

 
    </div> 
 
    <div ng-show="finderloader" class="spinner"> 
 

 
    </div> 
 
    <div id="results" ng-hide="search"> 
 
    <ons-scroller> 
 

 
     <ons-list ng-controller="DialogController"> 
 
     <ons-list-item modifier="tappable" ng-repeat="x in myData" tappable ng-click="getInfo(x.email);show('donor.html');"> 
 
      {{x.Name}} 
 
      <br>{{x.gender}} 
 
      <br>{{x.distance}} kilometer(s) away 
 
     </ons-list-item> 
 
     </ons-list> 
 
    </ons-scroller> 
 
    </div> 
 

 
</div>

感謝:)

出典

2016-07-16 ashish malgawa