我有以下字符串:

"/root/get";

现在我在上面的字符串中生成一个带有 1 个范围变量的查询字符串，但问题是当该变量的值发生变化时，新值不会自动在我的 URL 中更新。

您可以在下面的演示中看到我有 2 个按钮更新和检查。在更新中，我生成了查询字符串，并在检查按钮上更新了范围变量的值，但这并没有反射(reflect)在我的 URL 中。

我不明白为什么会这样。

在不调用 generateQueryParameters 方法的情况下单击复选按钮时的预期输出:

/root/get?no=2

var app = angular.module("myApp", []);
        app.controller("myController", function ($scope) {
        
        $scope.no = 1;
        $scope.str = "/root/get";
     
        $scope.update = function (data) {
          $scope.str=generateQueryParameters($scope.str,
               "no",$scope.no);
               console.log($scope.str);
        };
           

            $scope.check = function () {
              $scope.no=2;
              console.log($scope.str);
            };
               
    function generateQueryParameters(url,name,value)
    {
        var re = new RegExp("([?&]" + name + "=)[^&]+", "");
        function add(sep) {
            url += sep + name + "=" + encodeURIComponent(value);
        }
        function change() {
            url = url.replace(re, "$1" + encodeURIComponent(value));
        }
        if (url.indexOf("?") === -1) {
            add("?");
        } else {
            if (re.test(url)) {
                change();
            } else {
                add("&");
            }
        }
        return url;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <input type="button" value="Update" ng-click="update()">
    <input type="button" value="Check" ng-click="check()">
</div>

更新: 我知道 $scope.no 的值何时会改变，所以我认为我不需要 watcher 并且我不想再次调用 generateParameters .为什么 Angular 不像 Angular 绑定(bind)那样自动更新我的 str 中的值？

最佳答案

让我们从您的代码中的问题开始。您通过一个函数生成请求字符串，该函数实际上只在 update 函数中调用

$scope.update = function(data) {
  $scope.str = generateQueryParameters($scope.str,
    "no", $scope.no);
  console.log($scope.str);
};


$scope.check = function() {
  $scope.no = 2;
  console.log($scope.str);
};

您在 check 函数中更改了版本号，但没有再次调用该函数以更改 $scope.str，因此 的值$scope.str 还是一样的。

您可以通过在您的代码段中执行以下步骤轻松地对此进行测试:

1. 点击更新(v0)

2. 点击检查(v0)

3. 但是然后再次点击更新，你会看到现在它已经更新了(v2)

因此在第 2 步中您实际上更改了版本，您只是不再生成要使用的 str。

代码的简单修复就是简单地安排代码以便在每次更改版本时调用分配新 str 的函数:

$scope.update = function(data) {
  $scope.no = 1;
  $scope.str = generateQueryParameters($scope.str,
    "no", $scope.no);
  console.log($scope.str);
};


$scope.check = function() {
  $scope.no = 2;
  // here you need to call again your function for composing your URL and changing the value of str
  $scope.str = generateQueryParameters($scope.str,
    "no", $scope.no);
  console.log($scope.str);
};

function generateStringRequest() {

}

否则需要在no版本参数上监听，每次版本变化时自动刷新str值。但是这个解决方案意味着您将在调用 API 的每个 Controller 中都有一个观察者，并且所有参数总是硬编码在 Controller 中:

$scope.$watch('no', function() {
    $scope.str = generateQueryParameters($scope.str, 'no', $scope.no);
});

即使这个解决方案有效，实际上也很糟糕。 管理调用的逻辑在 Controller 内部，这是一个非常糟糕的做法(您应该考虑为此使用集中式服务)。

好多了，在 AngularJS 中，您可以使用自定义拦截器并在那里管理要执行的所有关于 HTTP 请求的操作。 因此，您可以将要使用的 API 版本指定为 HTTP 请求的参数。

这将使您的代码保持整洁。此外，如果您以后想更改某些请求，只需更改该请求参数即可。 如果你想改变所有的请求，在拦截器中你可以简单地设置所有对 version 1 的请求将被替换为 version 2。

这里是一个关于如何定义拦截器的示例代码:

angular.module('myApp').factory('MyHTTPFactory', MyHTTPFactory)
  .config(function($httpProvider) {
    // register the new interceptor in AngularJS
    $httpProvider.interceptors.push('MyHTTPFactory');
  });

MyHTTPFactory.$inject = [];

function MyHTTPFactory() {

  // this is the base URL of your rest requests, so this interceptor will be applied only to the requests directed to your service
  const MY_REST_URL = 'blablabla';

  // methods exposed by the service
  let factory = {
    request: request,
    requestError: requestError,
    response: response,
    responseError: responseError
  };
  return factory;

  // ============================================================


  function request(config) {
    if (config.url.includes(MY_REST_URL)) {
      let versionToUse = config.version;
      // here use a function for elaborating your query string, directly in the interecptor code
      config.url = elaborateQueryString();
    }
    return config;
  }

  function requestError(config) {
    return config;
  }

  function response(res) {
    return res;
  }

  function responseError(res) {
    return res;
  }

  // function for getting the query string you want to
  function elaborateQueryString() {
    // elaborate your requests
  }

}

然后通过 $http 像往常一样简单地执行 HTTP 请求，在请求中添加您要使用的版本作为参数:

// perform your request as usual simply specifying the new version parameter
let request = {
  url: `myserviceurl`,
  version: '2' // or whatever you qNR
};
$http(request);

因此拦截器会在执行之前“嗅探”您的所有请求，它会根据您的需要正确组合版本和查询字符串，并且您的所有操作都在其中进行管理和集中处理。

就像上一个提示一样，在定义诸如版本号、其余服务的端点等常量时，使用 AngularJS constant 并将它们注入(inject)到您需要使用它们的地方。硬编码字符串不是一个好习惯。

关于javascript - 范围变量值的变化没有反射(reflect)在我的字符串中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46055212/