Как передать значение переменной angularjs функции javascript?

Question

В этом коде я пытаюсь передать AngularJS к параметру Я функция:

<div ng-app ng-controller="LoginController"> 
    <p><a href='javascript:display({{ user.firstName }});'>{{ user.firstName }}</a> 
</div> 

function LoginController($scope) { 
    $scope.user = { 
     firstName: "Foo" 
    }; 
} 

function display(text){ 
    alert(text) 
} 

Когда «Foo» щелкает «Foo» должен отображаться, но как передать значение переменного angularjs к яваскрипту функции?

Fiddle: http://jsfiddle.net/Lt7aP/534/

Answer 1

Вопрос заключается в том, что значение, "Foo", переписано как часть кода. В этом случае появляется переменная, которая не существует.

display(Foo) // ReferenceError: Foo is not defined 

По меньшей мере, это должно быть указано как строковое значение.

display('Foo') 

Вы можете использовать json filter сделать это, чтобы включать в себя любые необходимые управляющие последовательности.

<a href='javascript:display({{ user.firstName|json }});'>{{ user.firstName }}</a> 

---

Или, если вы присоедините функцию к $scope, вы можете ссылаться на него и значение без {{...}} или фильтров в качестве ng-click:

function LoginController($scope) { 
    $scope.user = { 
     firstName: "Foo" 
    }; 

    $scope.display = function (text) { 
     alert(text); 
    }; 

    // or keep the global function and reference it on the $scope 
    // $scope.display = display; 
} 

<a ng-click="display(user.firstName)">{{user.firstName}}</a> 

http://jsfiddle.net/7z4wmnjj/

Answer 2

Первый шаг в отладке JS всегда должен быть, чтобы открыть консоль.

<p> 
    <a href='javascript:display('{{ user.firstName }}');'>{{ user.firstName }}</a> 
</p> 

Answer 3

Выполнение этого будет работать, но только для строк.

<p><a href='javascript:display("{{ user.firstName }}");'>{{ user.firstName }}</a> 

Это может быть немного глубокого погружения в Угловое, но вы должны думать о реализации фабрики, которая может явно обрабатывать такое поведение для вас.

Мы можем сделать функцию, которая принимает имя и любое количество аргументов и передает аргументы функции Javascript с этим именем. Он может работать следующим образом:

<a ng-click='callJS("display", user.firstName)'></a> 

И это может быть реализовано довольно простым способом.

// register a new factory on our module 
app.factory('callJS', function() { 
    // a factory returns one value 
    return function(fnName) { 
    var args = [].slice.call(arguments, 1), 
     fn = window.fnName; 

    return fn.apply(fn, args); 
    }; 
}); 

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

function LoginController($scope, callJS) { 
    $scope.callJS = callJS; 

    $scope.user = { 
    firstName: "Foo" 
    }; 
} 

Принимая этот подход означает, что вы не будете ограничены только нажать события либо, пока callJS находится в локальной области видимости, любое Угловое выражение будет иметь возможность вызывать функции JavaScript.

Это более гибкий, более проверяемый и более легкий отладчик, чем шаблоны переменных в атрибутах href.