两个ng-click功能不能一起执行

时间:2016-02-16 07:10:00

标签: javascript jquery angularjs ionic-framework

我想在一次ng-click中执行两个函数,但它没有执行。

当我尝试单独执行它们时,它运行正常。

我用分号'分隔两个函数名;' ”。

这是我的代码:

<!DOCTYPE html>
<html>
<body ng-app="starter" ng-controller="NavCtrl">
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic head</h1>
  </ion-header-bar>
  <ion-content>
    <h4>Enter the details</h4>
    <div class="list list-inset" >
      <label class="item item-input">
        <input type="text" name="place" ng-model="data.place" value="" placeholder="Place">
      </label>
      <label class="item item-input">
        <input type="number" name="pincode" ng-model="data.pincode" value="" placeholder="Pin Code">
      </label>
      <button class="button button-block button-positive" ng-click="savedata(); navigat('/success.html')" >
        Submit
      </button>
    </div>
  </ion-content>
</ion-pane>
</body>
</html>

这是控制器代码:

app.controller('NavCtrl',function($scope,$location,$http,$window){
  $scope.data = {};
  $scope.savedata = function(){
    $http.post("http://localhost/angular/insert2.php",{'place':$scope.data.place,'pincode':$scope.data.pincode})
      .success(function(data,status,headers,config){
    //console.log(data);
        alert("successful");
      })
      .error(function(){
        alert("failed");
      })
  };

  $scope.navigat = function(url){
    $window.location.href=url;
  };

  $scope.submit = function(){
    $scope.savedata();
  //$scope.navigat('/success.html');
 // $window.location.href='/success.html';
  }

});

我还尝试调用submit函数调用另外两个函数 - savedata()和navigat() - 但它只调用一个函数。

我还尝试将这两个函数放在两个不同的控制器中 - 然后在按钮元素之前调用body元素上的一个控制器和div元素上的另一个控制器。但看起来它甚至没有加载一个控制器。

请帮忙

3 个答案:

答案 0 :(得分:1)

您应该在savedata成功之前调用导航。

因为在调用savedata并等待ajax响应时,同时调用navigate并导航到新页面。

使用回调如下

$scope.savedata = function(callback){
    $http.post("http://localhost/angular/insert2.php",{'place':$scope.data.place,'pincode':$scope.data.pincode})
      .success(function(data,status,headers,config){
        alert("successful");
        if(callback) callback($scope);
      })
      .error(function(){
        alert("failed");
      })
  };

请致电如下

<button class="button button-block button-positive" ng-click="savedata(function (s) {s.navigat('/success.html')} );" >
        Submit
      </button>

http://plnkr.co/edit/QF80s7YxsLor70cNxLRk

答案 1 :(得分:1)

你可以试试这个:

   app.controller('NavCtrl',function($scope,$location,$http,$window){
  $scope.data = {};
  $scope.savedata = function(){
    $http.post("http://localhost/angular/insert2.php",{'place':$scope.data.place,'pincode':$scope.data.pincode})
      .success(function(data,status,headers,config){
    //console.log(data);
        alert("successful");
        $scope.navigat('/success.html');
      })
      .error(function(){
        alert("failed");
      })
  };

  $scope.navigat = function(url){
    $window.location.href=url;
  };

  $scope.submit = function(){
    $scope.savedata();
  //$scope.navigat('/success.html');
 // $window.location.href='/success.html';
  }

});

答案 2 :(得分:1)

您可以将navigat('/ success.html')放入已保存邮件的后调用成功回调中