AngularJS，如何将变量绑定(bind)到其他两个绑定(bind)变量的串联？

Question

我是 AngularJS 的新手，正在尝试构建一个 AngularJS 练习应用程序，用户将在其中连接来自多个输入的 url，即协议(protocol)、域、路径、param1、param2、param3 等。

该应用程序将创建一个指向该 url 的链接:

<a>{{protocol}}://{{domain}}{{path}}?{{param1}}&{{param2}}&{{param3}}</a>

上面的网址被使用了两次。一旦在 href 属性上，以及实际的文本。现在我想做的是:

<a href="{{url}}">{{url}}</a>

但我不确定在哪里分配 url。
我在下面尝试过，它有效，但似乎不正确。

<a href='{{url = protocol+"://"+domain+path+"?"+param1+"&"+param2+"&"+param3}}'>{{url}}</a>

假设 url在应用程序中多次使用，哪里是最适合分配 url 的位置?

Answer 1

您不应该在 View (HTML)中分配范围变量 - 它仅用于读取它们。

要从输入中创建一个新变量，请为它们中的每一个添加一个 ng-model，然后在 Controller 中定义一个方法，从它们中创建一个 $scope 变量，例如

您的 HTML 表单:

<div ng-controller="MyCtrl">

    <input type="text" ng-model="urlParts.protocol">
    <input type="text" ng-model="urlParts.domain">
    <!-- etc -->
    <a ng-href="{{makeUrl()}}">{{makeUrl()}}</a>
</div>

JS:

function MyCtrl($scope) {
    $scope.urlParts = {};
    $scope.urlParts.protocol = ""; 
    $scope.urlParts.domain = ""; 
    // etc... 
    // These values will be updated when the user types in the input boxes

    $scope.makeUrl = function() {
      return $scope.urlParts.protocol + "://" + $scope.urlParts.domain + $scope.urlParts.path + "?" + $scope.urlParts.param1 + "&" + $scope.urlParts.param2 + "&" + $scope.urlParts.param3;
    }
}