Конкретные переменные сферы в строку в выражении angular

Я использую метод scope в директиве angular ng-click, например:

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

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

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

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

Ответ 1

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

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

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

Ответ 2

Я создал рабочий пример 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;
  };
});

Ответ 3

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

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

Простой пример в jsfiddle

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

Ответ 4

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