页面刷新后ng-click新赋值被还原的Angular/JQuery问题求助

Hey there! Let's break down what's happening here and get your button working as expected.

Why Your Current Approach Isn't Working #

When you use jQuery to directly modify the ng-click attribute like this:

$("#Btn0").attr("ng-click","myFunction(e)");

Angular has no idea you changed the attribute. Here's the key issue:

• Angular compiles the DOM once when the page loads, binding all directives (like ng-click) to their corresponding functions.
• Your jQuery change updates the HTML, but Angular doesn't re-compile the element, so the original formCtrl.refreshButtonClick(button) is still running (which is why the page keeps refreshing).
• Even if the new ng-click did work, you're passing e instead of Angular's $event object, which would break the function's ability to prevent default actions.

Solution 1: Use Angular's Native Approach (Recommended) #

The cleanest way to fix this is to work within Angular's framework instead of fighting it with jQuery. Here's how:

1. Update your controller to override the button's click behavior
   In your formCtrl, modify the button objects returned by getRefreshButtons() to include your custom click handler:

   // Inside formCtrl
   this.getRefreshButtons = function() {
     let buttons = /* Your existing button-fetching logic here */;
     
     // Loop through buttons to add custom click logic
     buttons.forEach(button => {
       button.customClick = ($event) => {
         // Call your jQuery function
         myFunction($event);
         // Prevent the original refresh behavior
         $event.preventDefault();
         $event.stopPropagation();
       };
     });
     
     return buttons;
   };
   

2. Update the button's ng-click in your template
   Point the ng-click to the new custom method we added:

   <button ng-repeat="button in formCtrl.getRefreshButtons()" 
           class="btn btn-white btn-sm ng-binding ng-scope" 
           type="button" 
           ng-disabled="button.isDisabled() || button.isLoading()" 
           ng-click="button.customClick($event)" 
           id="Btn0" 
           style="">ImpData </button>
   

Solution 2: Force Angular to Re-Compile the Element (If You Must Use jQuery) #

If you absolutely need to use jQuery to modify the DOM (not recommended for Angular apps), you have to tell Angular to re-compile the button so it recognizes the new ng-click:

// Make sure this runs inside Angular's context (use $timeout if needed)
angular.element(document).ready(function() {
  const btnElement = $("#Btn0");
  
  // Update the ng-click attribute with the correct $event parameter
  btnElement.attr("ng-click", "myFunction($event)");
  
  // Get the element's Angular scope and injector
  const scope = btnElement.scope();
  const $compile = btnElement.injector().get("$compile");
  
  // Re-compile the element and apply changes to the scope
  $compile(btnElement)(scope);
  scope.$apply();
});

Then update your myFunction to prevent page refresh:

function myFunction(e) {
  // Your jQuery logic here
  console.log("Custom function executed!");
  
  // Stop the page from refreshing
  e.preventDefault();
  e.stopPropagation();
}

Pro Tip #

Mixing jQuery and Angular can lead to hard-to-debug issues because Angular manages its own DOM lifecycle. Whenever possible, use Angular's controllers, directives, or services to modify behavior instead of direct DOM manipulation with jQuery.

内容的提问来源于stack exchange，提问作者Aahat