AngularJS,如何将变量绑定到另外两个绑定变量的串联？

Question

我是AngularJS的新手,并尝试构建一个AngularJS练习应用程序,其中,用户将连接来自多个输入的URL,即协议,域,路径,param1,param2,param3 ......等.

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

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

以上网址使用两次.一旦上href属性,以及实际文本.现在我想做的是:

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

但我不知道在哪里分配网址.我在下面试过,但它确实有效,但似乎不正确.

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

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

Answer 1

您不应在视图(HTML)中指定范围变量 - 它仅用于读取它们.

要从输入中创建一个新变量,请为每个变量添加一个ng-model,然后在控制器中定义一个方法,从中创建$ 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;
    }
}