将范围变量连接到angular指令表达式中的字符串

时间:2013-10-04 16:53:34

标签: javascript angularjs

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

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

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

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

我只是“做错了”?

4 个答案:

答案 0 :(得分:9)

我创建了一个working CodePen example来演示如何执行此操作。

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

答案 1 :(得分:5)

您可以使用+

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

Simple example on jsfiddle

我确信您发布的代码是一个简化的示例,如果您的路径构建更复杂,我建议您提取一个可以构建您的网址的功能(或服务),以便您可以有效地编写单元测试。

答案 2 :(得分:2)

目前还不是很清楚问题是什么以及你要从你发布的代码中尝试完成什么,但我会采取措施。

一般情况下,我建议在ng-click上调用一个函数,如下所示:

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

obj.val1&amp; obj.val2应该在控制器的$ scope上可用,你不需要将它们传递给标记中的函数。

然后,在你的控制器中:

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

答案 3 :(得分:1)

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