variabili scope concat in stringa nella direttiva angolare expresssion

Question

Sto usando un metodo di applicazione in una direttiva ng clic angolare in questo modo:

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

Il problema qui è che obj.val1 e obj.val2 vengono interpretati come parte della stringa passata al metodo nell'espressione. Ho bisogno che siano valutati come le variabili che sono ... Non sono sicuro di quale sia l'approccio giusto qui.

C'è un modo angolare per concatenare questi valori in quella stringa/espressione?

Sto semplicemente "facendo sbagliato"?

Answer 1

Non è molto chiaro quale sia il problema e cosa stai cercando di ottenere dal codice che hai postato, ma mi prendo una pugnalata.

In generale, suggerisco di chiamare una funzione ng-click in questo modo:

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

obj.val1 & obj.val2 dovrebbe essere disponibile su $ ambito del controller, non avete bisogno di passare quelle in una funzione dal markup .

poi, nel controller:

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

Answer 2

Si può solo concat i valori utilizzando +

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

Simple example on jsfiddle

Sono sicuro che il codice che hai postato è un esempio semplificato, se il vostro edificio percorso è più complesso mi sento di raccomandare l'estrazione di una funzione (o servizio) che costruirà i tuoi url in modo da poter scrivere efficacemente il test unitario.

Answer 3

Ho creato un working CodePen example che dimostra come fare questo.

Rilevante 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> 

Rilevante 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>