CONCAT область видимости переменных в строку в угловой директивы expresssion

Question

Я использую метод области видимости в угловом директивы нг-клик так:

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

Проблема здесь в том, что obj.val1 и obj.val2 интерпретируются как часть строки, переданной методу в выражении. Мне нужно, чтобы их оценивали как переменные, которые они ... Я не уверен, какой правильный подход здесь.

Есть ли угловой способ объединить эти значения в эту строку/выражение?

Я просто «делаю это неправильно»?

Answer 1

Непонятно, в чем проблема и что вы пытаетесь выполнить из кода, который вы опубликовали, но я возьму на него удар.

В общем, я предлагаю вызвать функцию на нг щелкните так:

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

obj.val1 & obj.val2 должны быть доступны на $ рамки вашего контроллера, вам не нужно передавать их в функции от разметки ,

затем, в контроллере:

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

Answer 2

Вы можете просто Concat значения с помощью +

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

Simple example on jsfiddle

Я уверен, что код размещен упрощенный пример, если ваше здание путь является более сложным, я рекомендовал бы извлекать из функции (или услугу), которая будет строить ваши URL-адреса, чтобы вы могли эффективно писать единичный тест.

Answer 3

Я создал 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; 
    }; 
}); 

Answer 4

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