Angular.js：触发多个动作的按钮

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将一个promise数组作为参数，并返回一个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 /////////////////