即使使用$ rootScope，Angular JS双向绑定也无法正常工作

Question

我读了其他答案，其中双向绑定不起作用，它说是因为继承范围然后我将我的代码更改为rootScope，因为rootScope只是整个应用程序的一个。 现在我在这里使用指令请查看我的代码并告诉我代码有什么问题

＆＃13;

＆＃13;

.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'
  }
})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

提前致谢：）

Answer 1

你不需要$ rootScope，只需使用$ timeout而不是setTimeout来触发摘要事件。

$ timeout和$ http等Angular服务在您使用它们时会触发此事件。这就是为什么它在$ http resolve中工作。

Answer 2

setTimeout不了解angularjs消化周期，所以使用angularjs $ timeout或$ scope.apply