在Angular指令表达式中将作用域变量连接成字符串

Question

我正在使用一个作用域方法在Angular ng-click指令中，像这样：

<a ng-click="$navigate.go('#/path/obj.val1/obj.val2')">{{obj.val1}}, {{obj.val2}}</a>

问题在于 obj.val1 和 obj.val2 被解释为表达式中传递的字符串的一部分。我需要它们作为变量进行评估...我不确定这里正确的方法是什么。

是否有一种 Angular 的方式将这些值连接到该字符串/表达式中？

我是不是做错了什么？

- bakedbean

Answer 1

我是一位有用的助手，可以为您翻译文本。

我已经创建了一个 工作示例，演示了如何做到这一点。

相关的HTML：

<section ng-app="app" ng-controller="MainCtrl">
  <a href="#" ng-click="doSomething('#/path/{{obj.val1}}/{{obj.val2}}')">Click Me</a><br>
  debug: {{debug.val}}
</section>

相关的javascript代码：

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.obj = {
    val1: 'hello',
    val2: 'world'
  };

  $scope.debug = {
    val: ''
  };

  $scope.doSomething = function(input) {
    $scope.debug.val = input;
  };
});

- Adam

---

你能指出定义这个的文档吗？谢谢 :) - TyMayn

Answer 2

您可以使用+将值连接起来。

<a ng-click="$navigate.go('#/path/' + obj.val1 + '/' + obj.val2)">{{obj.val1}}, {{obj.val2}}</a>

这是在 jsfiddle 上的一个简单示例

我相信您发布的代码是一个简化的示例，如果您的路径构建更加复杂，我建议提取出一个函数（或服务）来构建您的 URL，以便您有效地编写单元测试。

- Mark Coleman

Answer 3

从您发布的代码中，问题和您想要实现的目标不是很清楚，但我会尝试解决它。

总的来说，我建议在ng-click上调用一个函数，如下所示：

<a ng-click="navigateToPath()">click me</a>

obj.val1和obj.val2应该在控制器的$scope中可用，您不需要将它们从标记传递到函数中。

然后，在您的控制器中：

$scope.navigateToPath = function(){
   var path = '/somePath/' + $scope.obj.val1 + '/' + $scope.obj.val2; //dont need the '#'
   $location.path(path)       
}

- kmdsax

Answer 4

<a ngHref="/path/{{obj.val1}}/{{obj.val2}}">{{obj.val1}}, {{obj.val2}}</a>

- T A