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;
    }
}

Answer 2

另一种类似的方法是使用ng-init指令创建一个动态属性，该属性表示所有这些属性的串联。您可以调用该函数或只是内联连接。

 <a ng-init="urlParts.url=makeUrl()" 
ng-href="urlParts.url">{{urlParts.url}}
</a>

<a ng-init="urlParts.url=urlParts.protocol + '://' + $scope.urlParts.domain..." 
    ng-href="urlParts.url">{{urlParts.url}}
    </a>

参考： http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html

试一试：http://plnkr.co/edit/PSvwCE?p=info

Answer 3

如果您想使用href绑定动态网址，则可以在ng-click或ng-mousedown事件中操纵您的网址并绑定到目标元素。

JS：

var goToLinkedPage = function (event, basePath, param1, param2, param 3) {
    var newState = basePath + "?" + param1 + "&" + param2 + "&" + param3;
    jQuery(event.target).attr('href',newState);
};

HTML：

<a ng-mousedown="goToLinkedPage($event, basePath, param1, param2, param3)"> Click Here </a>

Answer 4

只需使用此绑定表达式来串联HTML中两个以上的范围变量。

{{UserData.FirstName + ' ' + UserData.MiddleName + ' ' + UserData.LastName}}

如果要在任何属性中执行此操作，只需这样编写：

<input type="text" ng-value="UserData.FirstName + ' ' + UserData.MiddleName + ' ' + UserData.LastName">

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

4 个答案: