11

我是 AngularJS 的新手，正在尝试构建一个 AngularJS 练习应用程序，在该应用程序中，用户将连接来自多个输入的 url，即协议、域、路径、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？

4

4 回答 4

24

您不应该在视图（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;
    }
}
于 2013-08-12T09:56:53.633 回答
1

另一种类似的方法是使用 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

于 2015-05-20T13:54:17.610 回答
0

如果要绑定动态 url，href则可以在事件中操作 URLng-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>
于 2015-10-28T10:27:01.063 回答
0

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

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

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

<input type="text" ng-value="UserData.FirstName + ' ' + UserData.MiddleName + ' ' + UserData.LastName">
于 2018-08-27T12:20:02.823 回答