प्रपत्र के भीतर एक बटन क्लिक करने से पृष्ठ ताज़ा हो जाता है

Question

मेरे पास एंगुलर में एक फॉर्म है जिसमें दो बटन टैग हैं। एक बटन फॉर्म को सबमिट करता है ng-click। अन्य बटन विशुद्ध रूप से नेविगेशन का उपयोग करने के लिए है ng-click। हालाँकि, जब यह दूसरा बटन क्लिक किया जाता है, तो AngularJS एक पेज रिफ्रेश पैदा कर रहा है, जो 404 को ट्रिगर करता है। मैंने फंक्शन में एक ब्रेकपॉइंट गिरा दिया है और यह मेरे फंक्शन को ट्रिगर कर रहा है। यदि मैं निम्नलिखित में से कोई कार्य करता हूं, तो यह रुक जाता है:

1. यदि मैं ng-clickबटन को हटाता हूं , तो बटन पेज रिफ्रेश का कारण नहीं बनता।
2. अगर मैं फंक्शन में कोड कमेंट करता हूं, तो इससे पेज रिफ्रेश नहीं होता।
3. यदि मैं बटन टैग को एंकर टैग ( <a>) के साथ बदल देता हूं href="", तो यह ताज़ा करने का कारण नहीं बनता है।

उत्तरार्द्ध सबसे सरल वर्कअराउंड की तरह लगता है, लेकिन एंगुलरजेएस मेरे फ़ंक्शन के बाद भी कोई कोड क्यों चला रहा है जो पेज को फिर से लोड करने का कारण बनता है? बग की तरह लगता है।

यहाँ फार्म है:

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Password</label>
      <div class="controls">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
    </div>
  </fieldset>
</form>

यहाँ नियंत्रक विधि है:

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

Comments

देखें कि क्या यह आपका मुद्दा है github.com/angular/angular.js/issues/1238 (दुर्भाग्य से, मुझे पता नहीं है कि github के आस-पास मेरा रास्ता पर्याप्त है यह बताने में सक्षम होने के लिए कि क्या यह तय है 1.0.1 रिलीज में है या नहीं) ।

— मार्क राजकॉक

मैंने देखा कि एक है, लेकिन मैं स्थान नहीं बदल रहा हूं इसलिए मुझे नहीं लगता कि यह लागू होता है। जब तक कि यह अन्य बटन किसी तरह जमा नहीं कर रहा है, लेकिन यह एक सबमिट प्रकार के रूप में परिभाषित नहीं किया गया है, और जब मैं एनजी क्लिक करता हूं तो बटन फॉर्म सबमिट नहीं करता है।

— चुबसोंडबब्स

यह बहुत अच्छा होगा कि आप इस समस्या का एक कार्यशील डेमो प्रदान कर सकें। शायद से शुरू: कोणीय Plnkr

— पीट बीडी

का धोखा stackoverflow.com/questions/932653/...

— रॉय Truelove

नकल जैसी लगती है। stackoverflow.com/questions/16703215/…

— Vaibs

Answer 1

यदि आपके पास W3C विनिर्देश पर एक नज़र है , तो ऐसा प्रतीत होता है कि कोशिश करने के लिए स्पष्ट रूप से अपने बटन तत्वों को चिह्नित type='button'करना है जब आप उन्हें सबमिट नहीं करना चाहते हैं।

विशेष रूप से ध्यान देने वाली बात यह है कि यह कहाँ है

एक बटन तत्व जिसका कोई प्रकार निर्दिष्ट नहीं है, वह उसी प्रकार का प्रतिनिधित्व करता है जिस प्रकार बटन तत्व अपने प्रकार विशेषता के साथ "सबमिट" करने के लिए सेट होता है।

Comments

मुझे ओपी जैसी ही समस्या है लेकिन मेरे बटन में निर्दिष्ट प्रकार है - और फिर भी ताज़ा करने के कारणों पर क्लिक करें। कोई अन्य स्थान जहाँ मैं देख सकता था?

— मट्टो वेलेनिक

इससे मुझे पता चलता है कि आपकी समस्या जावास्क्रिप्ट में है। मेरे जवाब को संबोधित करने की समस्या डोम और ब्राउज़र के बीच अधिक मामला है। आपके बटन क्लिक को हैंडल करने वाली कुछ जावास्क्रिप्ट संभवत: आपके द्वारा देखे जा रहे रीलोड का कारण है। हैप्पी हंटिंग;)

— LOAS

यही वह है जिसकी तलाश में मैं हूं। यह मेरे पृष्ठ पर बहुत कष्टप्रद था क्योंकि यह केवल त्रुटियों को दर्शाने वाला था और प्रस्तुत नहीं करना था।

— रीपर_ऑनिक

मेरे पास मेरे बटन प्रकार = "बटन" के साथ चिह्नित हैं और मुद्दा भी है। मेरे एनजी-क्लिक हैंडलर में, मेरे पास $ event.stopPropagation () है। जब मैं इसे हटाता हूं, तो यह पुनः लोड नहीं होता है। मुझे इसकी आवश्यकता है। किसी भी विचार क्यों यह एक पृष्ठ पुनः लोड का कारण बनता है ?!

— felixfbecker

@freshfelicio: भी जोड़ने की कोशिश करें $event.preventDefault(), इससे मेरे मामले में मदद मिली। लेकिन मुझे कोई

— स्पष्टीकरण

Answer 2

आप डिफ़ॉल्ट हैंडलर को रोकने की कोशिश कर सकते हैं:

एचटीएमएल:

<button ng-click="saveUser($event)">

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

Comments

अच्छा! यह वास्तव में मेरे परिदृश्य के लिए आया था!

— रिचर्ड

SharePoint फॉर्म के अंदर AngularJS का उपयोग करते समय यह हमारे लिए काम करता है। मुझे "event.stopPropagation ();" जोड़ना पड़ा हालांकि साथ ही।

— निक डेमैयो

Answer 3

आपको ng-submit={expression}अपने <form>टैग में विशेषता घोषित करनी चाहिए ।

NgSubmit डॉक्स से http://docs.angularjs.org/api/ng.directive:ngSubmit

ऑनसाइट घटनाओं के लिए बाध्यकारी कोणीय अभिव्यक्ति को सक्षम करता है।

इसके अतिरिक्त यह डिफ़ॉल्ट क्रिया को रोकता है (जो फॉर्म के लिए सर्वर को अनुरोध भेजने और वर्तमान पृष्ठ को फिर से लोड करने के लिए)।

Comments

यह भी सुनिश्चित करें कि आपके पास फॉर्म पर 'एक्शन' प्रॉपर्टी सेट नहीं है: फॉर्म (एक्शन = "/ लॉगिन", लैंग-सबमिट = "लॉगिन ()") क्योंकि यह पेज को रिफ्रेश कर देगा भले ही आपके पास एनजी-सबमिट सेट हो। ।

— जेनो

प्रपत्र सबमिट करना और डिफ़ॉल्ट कार्रवाई को रोकना चूंकि क्लाइंट-साइड एंगुलर एप्लिकेशन में रूपों की भूमिका शास्त्रीय राउंडट्रिप ऐप्स की तुलना में भिन्न होती है, यह ब्राउज़र को फ़ॉर्म सबमिट करने वाले पूर्ण पृष्ठ रीलोड में अनुवाद न करने के लिए वांछनीय है जो सर्वर को डेटा भेजता है । इसके बजाय कुछ जावास्क्रिप्ट तर्क को ट्रिगर किया जाना चाहिए ताकि आवेदन को विशिष्ट तरीके से सबमिट किया जा सके। इस कारण से, कोणीय तब तक डिफ़ॉल्ट क्रिया (सर्वर को सबमिट करने) को रोकता है, जब तक कि <form> तत्व में एक एक्शन विशेषता निर्दिष्ट न हो। - docs.angularjs.org/api/ng.directive:form

— जिग्नेश

मेरे पास एनजी-सबमिट = {अभिव्यक्ति} और टाइप = "सबमिट" के साथ एक बटन है। BB10 को छोड़कर सिर्फ ठीक काम करता है। अगर मैं BB10 कीबोर्ड के सबमिट का उपयोग करता हूं तो पृष्ठ ताज़ा हो जाएगा। अगर मैं अपने फॉर्म में दिए गए बटन का उपयोग करता हूं तो यह ठीक काम करता है।

— माइकल

यह मेरे लिए काम नहीं कर रहा है। मैंने बिल्कुल दिशा-निर्देशों का पालन किया। पृष्ठ अभी भी पोस्ट करता है

— meffect

Answer 4

मैं डिफ़ॉल्ट व्यवहार को रोकने के लिए निर्देश का उपयोग करता हूं:

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

और फिर, HTML में:

<button class="secondaryButton" prevent-default>Secondary action</button>

इस निर्देश का उपयोग <a>अन्य सभी टैग के साथ भी किया जा सकता है

Comments

+1 धन्यवाद! यह तब सहायक होता है जब आपके पास <form>टैग तक पहुंच नहीं होती है और इसलिए आप ng-submitनिर्देश का उपयोग नहीं कर सकते हैं ।

— जैकव्सवर्ल्ड

इस एक के लिए धन्यवाद, लेकिन मैं भी एक निर्देश में एनजी क्लिक को रद्द करने की जरूरत है

— boi_echos

यह फ़ॉर्म को एनजी-सबमिट कॉलबैक को ट्रिगर करने से भी रोकता है, है ना?

— झौरलाड एस्ट्रेला

Answer 5

आप रख सकते हैं <button type="submit">, लेकिन विशेषता निकालना होगा action=""की <form>।

Answer 6

मुझे आश्चर्य है कि किसी ने संभवतः सबसे सरल समाधान का प्रस्ताव क्यों नहीं दिया:

एक का उपयोग न करें <form>

एक <whatever ng-form>IMHO एक बेहतर काम करता है और एक HTML रूप के बिना, वहाँ कुछ भी नहीं ब्राउज़र अपने आप में प्रस्तुत किया जाना है। कोणीय का उपयोग करते समय यह बिल्कुल सही व्यवहार है।

Comments

बिना फॉर्म टैग के क्लिक पर फॉर्मलिड को कैसे लागू करें?

— रिजवान पटेल

@RizwanPatel मुझे लगता है, मुझे समझ में नहीं आता है, लेकिन ng-form=someFormआप के साथ है , $scope.someFormऔर यह एक $validक्षेत्र है। इसलिए मुझे वह सब चाहिए जो मुझे चाहिए <button ng-disabled="!someForm.$valid">।

— Maaartinus

Answer 7

अपने प्रपत्र में क्रिया जोड़ें।

<form action="#">

Answer 8

यह उत्तर सीधे प्रश्न से संबंधित नहीं हो सकता है। यह केवल उस स्थिति के लिए है जब आप स्क्रिप्ट का उपयोग करके फ़ॉर्म सबमिट करते हैं।

एनजी-सबमिट कोड के अनुसार

 var handleFormSubmission = function(event) {
  scope.$apply(function() {
    controller.$commitViewValue();
    controller.$setSubmitted();
  });

  event.preventDefault();
};

formElement[0].addEventListener('submit', handleFormSubmission);

यह फॉर्म पर ईवेंट श्रोता को जमा करता है। लेकिन सबमिट हैंडलर को तब नहीं बुलाया जाएगा जब फॉर्म सबमिट करके सबमिट किया जाए। submit ()। इस मामले में, एनजी-सबमिट डिफ़ॉल्ट कार्रवाई को नहीं रोकेगा, आपको एनजी-सबमिट हैंडलर में खुद को रोकने के लिए कॉल करना होगा;

एक यथोचित निश्चित उत्तर प्रदान करने के लिए, HTML फॉर्म सबमिशन एल्गोरिथ्म आइटम 5 में कहा गया है कि एक फॉर्म केवल सबमिट ईवेंट को भेजता है अगर इसे सबमिट विधि को कॉल करके प्रस्तुत नहीं किया गया था (जिसका अर्थ है कि यह केवल एक सबमिट ईवेंट भेजता है यदि बटन या अन्य निहित द्वारा सबमिट किया गया है विधि, उदाहरण के लिए एंटर दबाते समय इनपुट टाइप टेक्स्ट एलिमेंट पर)।

देखें फार्म एक लिंक से प्रस्तुत () का उपयोग कर प्रस्तुत ऑनसबमिट हैंडलर द्वारा पकड़ा नहीं किया जा सकता

Answer 9

पहला बटन फॉर्म जमा करता है और दूसरा नहीं करता है

<body>
<form  ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}

$scope.Dont=function()
{
$scope.v=0;
}
});
</script>

</body>

Answer 10

बस फ़ाइल FormsModuleकी importsसरणी में app.module.tsजोड़ें, और import { FormsModule } from '@angular/forms';इस फ़ाइल के शीर्ष पर जोड़ें ... यह काम करेगा।