javascript - 将范围变量连接到角度指令表达式中的字符串

Question

我在角度 ng-click 指令中使用范围方法，如下所示：

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

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

是否有角度方式将这些值连接到该字符串/表达式中？

我只是“做错了”吗？

Answer 1

我创建了一个有效的 CodePen 示例来演示如何执行此操作。

相关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;
  };
});

Answer 2

您可以使用连接值+

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

jsfiddle上的简单示例

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

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

Answer 4

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