7

我有以下字符串：

"/root/get";

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

您可以在下面的演示中看到我有 2 个按钮更新和检查。在更新中，我正在生成查询字符串，在检查按钮上，我正在更新范围变量的值，但这并没有反映在我的 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 的值何时会改变，所以我认为我不需要观察者，我不想再次调用。为什么 Angular 不会像 Angular 绑定那样generateParameters自动更新我的值？str

4

7 回答 7

3

让我们从代码中的问题开始。您通过函数生成请求字符串，该函数实际上仅在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 的每个控制器中都有一个观察者，并且所有参数始终在控制器内部进行硬编码：

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

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

更好的是，在 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);

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

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

于 2017-09-05T13:28:25.187 回答
1

您可以使用新的控制器语法轻松定义属性 （允许您直接绑定到控制器属性和方法），如下所示：str

  Object.defineProperty(vm,
    "str", {
      get: function() {
        return vm.generateQueryParameters("/root/get","no", vm.no);
      },
      set: function(newValue) {
        // setter function
      },
      enumerable: true,
      configurable: true
  });

这意味着每次访问 的值时str，它都会重新评估 url 字符串。这使您的代码独立于$scope并且$watch更具前瞻性。

var app = angular.module("myApp", []);
app.controller("myController", function() {
  var vm = this;
  vm.no = 1;

  Object.defineProperty(vm,
    "str", {
      get: function() {
        return vm.generateQueryParameters("/root/get","no", vm.no);
      },
      set: function(newValue) {
        // setter function
      },
      enumerable: true,
      configurable: true
  });

  vm.update = function(data) {
    console.log(vm.str);
  };

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

  vm.generateQueryParameters = function(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 as ctrl">
  <input type="button" value="Update" ng-click="ctrl.update()">
  <input type="button" value="Check" ng-click="ctrl.check()">
</div>

对于以下对象（来自讨论）：

[
  {
    "name": "Node-1",
    "isParent": true,
    "text" : [
       {
           "str" : "/root/get",
       },
       {
          "str" : "/root/get",
       }],
     "nodes": [
      {
        "name": "Node-1-1",
        "isParent": false,
         "text" : [
           {
             "str" : "/root/get",
           },
           {
             "str" : "/root/get",
           }],
           "nodes": [
           {
            "name": "Node-1-1-1",
            "isParent": false,
            "text" : [
            {
              "str" : "/root/get",
            },
            {
              "str" : "/root/get",
            }],
            "nodes": []
          }
        ]
      }
    ]
  }
]

我们可以扩展这种方法 - 请参见下面的演示：

var app = angular.module("myApp", []);
app.controller("myController", function() {
  var vm = this;
  vm.no = 1;
  vm._records=[{"name":"Node-1","isParent":true,"text":[{"str":"/root/get",},{"str":"/root/get",}],"nodes":[{"name":"Node-1-1","isParent":false,"text":[{"str":"/root/get",},{"str":"/root/get",}],"nodes":[{"name":"Node-1-1-1","isParent":false,"text":[{"str":"/root/get",},{"str":"/root/get",}],"nodes":[]}]}]}];
  
  vm.setRecords = function(node, url) {
    node.text && node.text.forEach(function(e){
      e.str = url;
    });
    // recursively set url
    node.nodes && node.nodes.forEach(function(e){
      vm.setRecords(e, url);
    });
  }

  Object.defineProperty(vm,
    "records", {
      get: function() {
        let url = vm.generateQueryParameters("/root/get", "no", vm.no);
        vm._records.forEach(function(e){
          vm.setRecords(e, url);
        });
        return vm._records;
      },
      set: function(newValue) {
        // setter function
      },
      enumerable: true,
      configurable: true
    });

  vm.update = function(data) {
    console.log(vm.records);
  };

  vm.check = function() {
    vm.no = 2;
    console.log(vm.records);
  };

  vm.generateQueryParameters = function(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;
  }
});
.as-console-wrapper{top:25px;max-height:calc(100% - 25px)!important;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController as ctrl">
  <input type="button" value="Update" ng-click="ctrl.update()">
  <input type="button" value="Check" ng-click="ctrl.check()">
</div>

于 2017-09-21T02:42:53.953 回答
0

您需要在 check 方法中再次调用 generateQueryParameters 方法。

$scope.check = function () {
              $scope.no=2;
              $scope.str=generateQueryParameters($scope.str,
               "no",$scope.no);
              console.log($scope.str);
            };
于 2017-09-05T12:50:43.740 回答
0

尝试这个：

$scope.str = "/root/get";
$scope.$apply();
于 2017-09-24T07:35:26.617 回答
0

您需要为no调用您的方法添加观察者generateQueryParameters并更改的值$scope.str

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

            $scope.update = function (data) {
              $scope.no=2;
            };
               
    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>

先更新再检查

于 2017-09-05T12:45:40.353 回答
0

您可以使用

$scope.$apply()

将更改应用于函数中的范围。它本质上有助于强制您的双向数据绑定开始并赶上您范围内的新变化。如果你正确地实现了数据绑定，你不一定要使用这个命令，但它确实可以作为一个肮脏的快速破解。

于 2017-09-22T19:26:23.660 回答
0

试试这个，问题是javascript原始值作为值而不是引用传递。

var app = angular.module("myApp", []);
    app.controller("myController", function ($scope) {

    $scope.testObject = {
       no: 1,
       str: "/root/get"
    };

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


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

function generateQueryParameters(urlAndValue, name)
{
    var re = new RegExp("([?&]" + name + "=)[^&]+", "");
    function add(sep) {
        urlAndValue.str += sep + name + "=" + encodeURIComponent(urlAndValue.no);
    }
    function change() {
        urlAndValue.str = urlAndValue.str.replace(re, "$1" + encodeURIComponent(urlAndValue.no));
    }
    if (urlAndValue.str.indexOf("?") === -1) {
        add("?");
    } else {
        if (re.test(urlAndValue.str)) {
            change();
        } else {
            add("&");
        }
    }
    return urlAndValue.str;
}
});
于 2017-09-23T14:46:39.750 回答