Question

我是菜鸟我刚获得了我的网络开发证书。我也是Angularjs的新手。我有一个按钮，它做了几件事： 1）接收来自网站访问者的输入， 2）使用输入进行API调用， 3）出现div， 4）用数据填充div。

这一切都有效。如何使其工作：5）滚动到显示数据的div。我在控制器中有代码，但我做错了，网站不会自动滚动到带有数据的div。我认为能够使按钮点击触发多个事件和/或更改dom将是有用的。

我还没想出如何将它放在像Plunker这样的示例网站中。我可以在下面粘贴我的控制器代码。回购是：https://github.com/MikeGalli/wats4030-capstone_v2 该网站是：http://thisisourgov.com/ 使用此按钮可以完成另外一件事：6）清除访问者输入。感谢您的任何见解！

我的代码：

angular.module('wats4030CapstoneV2App')
  .controller('MainCtrl', function($scope, current, repsearchfed, repsearch) {
    $scope.current = current.query();
    $scope.refreshCurrent = function(location) {
      $scope.current = current.query({
        location: location
      });

      //// Start Make the div visiable /////////////////
      $scope.IsVisible = $scope.IsVisible ? false : true;
      //// End Make the div visiable /////////////////

      //// Start repsearch /////////////////
      $scope.current.$promise.then(function(data) {
        $scope.repsearch = repsearch.query({
          lat: data.results[0].geometry.location.lat, //This is the Google search
          lng: data.results[0].geometry.location.lng
        });
      });
      //// End repsearch /////////////////

      //// Start repsearchfed /////////////////
      $scope.current.$promise.then(function(data) {
        $scope.repsearchfed = repsearchfed.query({
          lat: data.results[0].geometry.location.lat, //This is the Google search
          lng: data.results[0].geometry.location.lng
        }).then(function(repdata) {
          $scope.repdata = repdata.data;
        });
      });
      //// End repsearchfed /////////////////

      //// Start Scroll to div /////////////////
      $scope.window = (function scrollWin() {
        window.scrollTo(0, 500);
        $scope.refreshCurrent.$setUntouched();
        $scope.refreshCurrent.$setPristine();
      });
      //// End Scroll to div /////////////////

    };
  });

Answer 1

您可以重构代码以使用$q服务https://docs.angularjs.org/api/ng/service/ $ q，$q.all期望一组promises作为参数并返回一个promise，当数组的每个promise都是解决。使用此服务，您的查询不会遇到竞赛问题。

angular.module('wats4030CapstoneV2App')
  .controller('MainCtrl', function($scope, $q, current, repsearchfed, repsearch) {
    $scope.current = current.query();
    $scope.refreshCurrent = function(location) {
      $scope.current = current.query({
        location: location
      });

      //// Start Make the div visiable /////////////////
      $scope.IsVisible = $scope.IsVisible ? false : true;
      //// End Make the div visiable /////////////////

      // Start search
      $scope.current.$promise.then(function(data) {
        // Wait both queries, repsearch and repsearchfed
        $q.all([
          repsearch.query({
            lat: data.results[0].geometry.location.lat, //This is the Google search
            lng: data.results[0].geometry.location.lng
          }),
          repsearchfed.query({
            lat: data.results[0].geometry.location.lat, //This is the Google search
            lng: data.results[0].geometry.location.lng
          })
        ]).then(function (response) {
          // Search finished
          var repdata = response[0],
            repfeddata = response[1];
          $scope.repdata = repdata.data;
          $scope.repfeddata = repfeddata.data;
          // Clear input text
          $scope.location = '';
          // Scroll to section
          window.scrollTo(0, 500);
        })
      });
      //// Start repsearch /////////////////

      // $scope.current.$promise.then(function(data) {
      //   $scope.repsearch = repsearch.query({
      //     lat: data.results[0].geometry.location.lat, //This is the Google search
      //     lng: data.results[0].geometry.location.lng
      //   });
      // });
      // //// End repsearch /////////////////

      // //// Start repsearchfed /////////////////
      // $scope.current.$promise.then(function(data) {
      //   $scope.repsearchfed = repsearchfed.query({
      //     lat: data.results[0].geometry.location.lat, //This is the Google search
      //     lng: data.results[0].geometry.location.lng
      //   }).then(function(repdata) {
      //     $scope.repdata = repdata.data;
      //   });
      // });
      //// End repsearchfed /////////////////

      //// Start Scroll to div /////////////////
      // $scope.window = (function scrollWin() {
      //   window.scrollTo(0, 500);
      //   $scope.refreshCurrent.$setUntouched();
      //   $scope.refreshCurrent.$setPristine();
      // });
      //// End Scroll to div /////////////////

    };
  });

Answer 2

您应该能够重写启动滚动的函数的第一行。基本上你在等待相同的$ promise，然后应用scrollWin函数。

 //// Start Scroll to div /////////////////
 $scope.current.$promise.then(function scrollWin() {
   window.scrollTo(0, 1000);
   $scope.refreshCurrent.$setUntouched();
   $scope.refreshCurrent.$setPristine();
 });
 //// End Scroll to div /////////////////

Angularjs：触发多个动作的按钮

2 个答案: