AngularJS，如何将一个变量绑定到另外两个已绑定变量的连接上？

Question

我是AngularJS的新手，正在尝试构建一个AngularJS练习应用程序，在此应用程序中，用户将从多个输入拼接URL，即协议、域名、路径、参数1、参数2、参数3等。

应用程序将创建到该URL的链接：

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

上面的URL被使用了两次。一次在href属性中，一次是实际文本。现在我想做的是：

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

但我不确定在哪里指定URL。 我尝试了以下代码，虽然有效，但似乎不正确。

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

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

假设url在应用程序中被多次使用，那么哪里是分配url最合适的地方？

- haejeong87

---

尝试使用 ng-init，文档参见 http://docs.angularjs.org/api/ng.directive:ngInit。此外，你可能想要使用 ng-href 而非 href。 - Aditya Jain

你好，你不能将它存储在你的作用域内，使用 $scope.url = 拼接后的url; 然后在你的控制器中使用 {{url}} 吗？ - Yalamber

嗨@askkirati，但如果我这样做，当用户更改其中一个变量时，URL没有得到更新... $scope.url = 连接的URL似乎只在初始化期间发生一次。我做错了什么吗？ - haejeong87

@AdityaJain，samething，ng-init只会执行一次... - haejeong87

同意，我认为@mikel提供的解决方案是最佳的。 - Aditya Jain

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

- Michael Low

---

你为什么使用 ng-href 而不是常规的 href？ - Pavlo

哎呀！这太简单了。非常感谢你！ - haejeong87

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>

Reference: http://www.ozkary.com/2015/03/angularjs-ng-model-concatenate-model.html

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

- ozkary

Answer 3

如果您想将动态URL与 href 绑定，则可以在 ng-click 或 ng-mousedown 事件中操作URL，并将其绑定到目标元素。

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>

- Rubi saini

Answer 4

只需在 HTML 中使用此绑定表达式即可连接两个或两个以上作用域变量。

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

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

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

- BairavanD