Передача динамических методов пользовательской директиве в angular
-
21-12-2019 - |
Вопрос
Я создаю пользовательскую директиву, где мне нужно назначить функцию внутри объекта, которая будет использоваться при переходе к моей директиве.Однако, если я передаю метод, записывая непосредственно имя функции внутри шаблона, он работает нормально.Но если я назначаю ссылку на этот метод одному из свойств моего объекта, а затем я использую это в своем шаблоне для передачи его в директиву, но это не работает.
Вы можете посмотреть здесь - jsfiddle
Вы можете посмотреть в консоли.Нажмите на кнопку Сохранить, она вызовет функцию сохранения внутри директивы, но оттуда я вызываю метод контроллера, который не работает.Но если вы напишете имя функции blabla
вместо dynamicMethods.myMethod
тогда он вызовет, но при этом я получил неопределенное внутреннее предупреждение.
Спасибо тебе.
Решение
Ты все сделал почти правильно.
Первая ошибка была, когда вы определили dynamicMethods
объект, на который вы ссылаетесь $scope.blabla
которого еще не существовало.
Вторая ошибка заключалась в том, что вы передавали значения в accept
вызов функции, которую вы привязали к родительской области, вам нужно передать как:
$scope.accept({msg: "from dir"})
где msg
является локальной переменной с именем, которая может быть использована в значении выражения accept
атрибут при вызове вашей пользовательской директивы <editkeyvalue accept="dynamicMethods.myMethod(msg)" ...
Я обновил твоя скрипка соответственно.
Когда ты пишешь accept: "&"
вы говорите angular, чтобы
- использовать
$parse
сервис для синтаксического анализа выражения (dynamicMethods.myMethod(msg)
) - "привязать" (через закрытие javascript)
$scope
из функции, возвращенной с шага 1 в исходную область (область контроллера в вашем случае) - сохраните функцию внутри
accept
свойство вашей директивы local scope.
Теперь, если вы проверите содержимое $scope.accept
непосредственно перед тем, как вы вызовете это в директиве, вы увидите что-то похожее на:
function (locals) {
return parentGet(parentScope, locals);
}
где locals
является объектом с локальными переменными, используемыми, когда мы достигаем оценки функции, возвращаемой из $parse
.Поскольку в javascript нет именованных параметров, и мы не хотим каким-либо образом указывать, что значение локальной переменной msg
это "from dir", мы передаем его как простой объект, где ключ указывает на имя переменной {msg: "from dir"}
.
Angular просмотрит выражение (строку) для вычисления и обнаружит, что msg
находится внутри квадратных скобок, таким образом, он выглядит как параметр, значение которого можно найти в locals
объект.
Когда придет время вызывать фактическую функцию, angular преобразует locals
преобразуйте объект в обычный массив, сохраняя порядок параметров, которые он считывает из выражения, и вызывайте функцию способом, аналогичным:
var locals = {msg: "from dir"};
var targetFn = dynamicMethods.myMethod;
var context = dynamicMethods;
targetFn.apply(context, ["from dir"]);
Надеюсь, это немного поможет понять, что происходит.