Angularjs：触发多个操作的按钮

我是个笨蛋，我刚拿到网络开发证书。我对Angularjs也是新手。我有一个按钮，可以做几件事： 1） 接收站点访问者的输入， 2） 使用输入进行API调用， 3） 使div出现， 4） 用数据填充div

所有这些都有效。 如何实现这一点：5）滚动到显示数据的div。我在控制器中有代码，但我做了一些错误的事情，网站不会自动滚动到包含数据的div。 我认为，能够使按钮单击触发若干事件和/或dom更改将非常有用

我还没有弄明白如何把这个放到像Plunker这样的示例站点中。我可以在下面粘贴我的控制器代码。 回购协议是： 该网站是： 使用此按钮还可以完成一件事：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 /////////////////

    };
  });

---

您可以重构代码以使用

$q

服务$q，

$q。all

需要一个承诺数组作为参数，并返回一个承诺，该承诺在数组的每个承诺都得到解决时得到解决。有了这项服务，您就不会因为查询而陷入竞争问题

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

    };
  });

---

您应该能够重写启动滚动的函数的第一行。基本上，您正在等待相同的$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 /////////////////