Угловые события на одной кнопке

Учение Угловое, встречается еще одна проблема на моем пути, надеюсь, что кто-то может помочь. У меня есть одна кнопка, которая должна выполнить два действия: загрузить что-то и отправить formdata на сервер. Так что я написал это:Угловые события на одной кнопке

<form id='download'> 
    <label for='name'>Name:</label> 
    <input type='name' ng-model='nameValue'> 
    <label for='email'>Email:</label> 
    <input type='email' id='email' ng-model='emailValue'> 
</form> 

<a ng-click='sendFormDataIfVal()' href="{{filename}}" download="{{filename}}">Download</a>

Но проблема и мой вопрос - теперь загрузка и отправка происходит одновременно, когда я хочу скачать файл только если emailValue проверка прохода и имя-значение не является пустым. Пусть это будет что-то вроде этого, но я не знаю, как закончить функцию

$scope.sendFormDataIfVal = function() { 
    $scope.validateEmail() && $scope.sendFormData(); // download & send 
    if(!$scope.validateEmail()) { 
    // do not download and do not send 
    } 
};

Любой совет будет очень ... и знаю :)

источник

2016-06-21 impregnable fiend

Один подход - отключить ссылку, используя css. после активации будет работать как обработчик события клика, так и функция загрузки.

Переключите Линка 'инвалид' класса CSS с помощью функции проверки

вот working example

HTML

<body ng-app="myApp" ng-controller="myController"> 
     <form id="download"> 
      <label for="name">Name:</label> 
      <input type="name" ng-model="nameValue" /> 
      <label for="email">Email:</label> 
      <input type="email" id="email" ng-model="emailValue" /> 
     </form> 
     <a ng-class="{'disabled' : !isFormValid()}" ng-click="sendFormData()" ng-href="{{fileUrl}}" download="{{fileName}}" >Download</a> 
     </body>

var myApp = angular.module('myApp',[]); 

    myApp.controller('myController', ['$scope', function($scope) { 
     $scope.emailValue = '[email protected]'; 
     $scope.nameValue = ""; 
    $scope.fileUrl = "http://thatfunnyblog.com/wp-content/uploads/2014/03/funny-videos-funny-cats-funny-ca.jpg"; 
    $scope.fileName = "funny-cat.jpeg"; 


     $scope.isEmailValid = function(){ 
     //replace this simplified dummy code with actual validation 
     return $scope.emailValue.indexOf('@') !== -1; 

     } 

     $scope.isFormValid = function(){ 

     return $scope.isEmailValid() && $scope.nameValue.length; 

     } 

     $scope.sendFormData = function(){ 

     console.log('sent that data'); 

     } 

    }]);

CSS

a.disabled{ 
/*simulate disabled using css, since this property is nto supported on anchor element*/ 
color:gray; 
pointer-events:none; 

}

источник

2016-06-21 12:18:36 CodeToad

вау, здорово! Спасибо 1 миллиард раз, человек –

рад помочь :) счастливое кодирование – CodeToad

можно задать еще один вопрос?) –

Попробуйте это:

$scope.sendFormDataIfVal = function() {  
    if(!$scope.validateEmail()) { 
    // do not download and do not send 
    } 
else{ 
download and send 
} 
};

источник

2016-06-21 12:04:17

Угловые события на одной кнопке

ответ

Смежные вопросы