如何将ng-style中的图片URL作为参数传入saveData函数？

There are two straightforward ways to pass that constructed image URL to your saveData() function. Let's break them down:

Approach 1: Directly Pass the Constructed URL in ng-click #

Since the variables used to build the URL (prefixVal, completiondetail.IDProofURL, toaken) are already available in your scope, you can assemble them directly in the ng-click expression:

Update the Save Button #

<input type="button" name="save" ng-click="saveData(prefixVal + completiondetail.IDProofURL + toaken)" value="save">

Modify Your Controller's saveData Function #

Make sure the function accepts the URL parameter:

$scope.saveData = function(imageUrl) {
  // Now you can use the imageUrl parameter for your save logic
  console.log('Image URL to save:', imageUrl);
  // ... rest of your save code
};

This is a quick fix that works if you don't need to reuse the URL elsewhere in your template or controller.

Approach 2: Store the URL in a Scope Variable (Recommended for Maintainability) #

To avoid repeating the URL construction in both ng-style and ng-click, store the full URL in a scope variable. This follows the DRY (Don't Repeat Yourself) principle and makes future changes easier.

Step 1: Compute and Watch the URL in Your Controller #

// Initialize the image URL
$scope.imageUrl = $scope.prefixVal + $scope.completiondetail.IDProofURL + $scope.toaken;

// Watch for changes to the underlying variables and update the URL automatically
$scope.$watchGroup(['prefixVal', 'completiondetail.IDProofURL', 'toaken'], function(newValues) {
  // newValues[0] = prefixVal, newValues[1] = completiondetail.IDProofURL, newValues[2] = toaken
  $scope.imageUrl = newValues[0] + newValues[1] + newValues[2];
});

Step 2: Update the Modal Container's ng-style #

Use the new scope variable instead of constructing the URL inline:

<div class="modalContainer" ng-style="{'background-image': 'url(' + imageUrl +')'}">
</div>

Step 3: Pass the Variable to saveData() #

Update the save button to use the precomputed URL:

<input type="button" name="save" ng-click="saveData(imageUrl)" value="save">

Controller's saveData Function (Same as Approach 1) #

$scope.saveData = function(imageUrl) {
  // Use imageUrl for your save operations
  console.log('Saving image URL:', imageUrl);
};

This approach is better because if you ever need to adjust how the URL is built (like adding a new parameter or changing the order), you only have to update the controller code once instead of modifying both the template's ng-style and ng-click.

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