#javascript #angularjs #angularjs-directive
#javascript #angularjs #angularjs-директива
Вопрос:
Я пишу директиву AngularJS 1.x (давайте назовем ее MyDirective
). Его область действия объявлена следующим образом:
scope: {
accessor: '='
}
В своей link
функции я присваиваю новый объект этому accessor
полю, вот так:
scope.accessor = {
// methods such as doSomethingToMyDirective()
};
Теперь я создаю экземпляр этой директивы динамически с помощью $compile
:
var element = $compile('<div data-my-directive data-accessor="directiveAccessor"></div>')(myScope);
Как только это выполняется, моя текущая область видимости ( myScope
) имеет directiveAccessor
свойство, которое ссылается на экземпляр объекта, созданный в директиве.
Проблема: это поле не сразу доступно.
Другими словами, после того, как я запустил $compile
, я не могу получить доступ myScope.directiveAccessor
немедленно к следующей команде. Когда я позже проверю область видимости, поле будет там, и, вероятно, одного $timeout
будет достаточно.
С некоторыми точками останова я могу заметить, что объект действительно создается прямо при $compile
выполнении; accessor
во внутренней области видимости уже указывает на объект. Однако, похоже, что двусторонняя привязка, которая копировала бы значение из accessor
внутренней области в myScope.directiveAccessor
, не становится активной до более позднего момента.
Есть ли какой-либо способ заставить AngularJS немедленно копировать значения с двусторонней привязкой (т. Е. Не дожидаясь каких-либо обещаний)?
Комментарии:
1. Вы должны получить доступ к связанным переменным, например, в методах жизненного цикла $OnInit и $ onChanges. docs.angularjs.org/guide/component — Обратите внимание, что они работают с любым контроллером, а не только с контроллерами компонентов.
Ответ №1:
Используйте привязку выражения ( amp;
), чтобы немедленно установить родительскую переменную области видимости:
app.directive("myDirective", function () {
return {
scope: { onPostLink: "amp;" },
link: postLink
};
function postLink(scope, elem, attrs) {
scope.accessor = {
doSomethingToMyDirective: function() {
return "Hello world";
}
};
scope.onPostLink({$event: scope.accessor});
scope.$on("$destroy", function() {
scope.onPostLink({$event: null});
});
}
})
Использование:
<my-directive on-post-link="directiveAccessor=$event">
</my-directive>
Не забудьте null
указать ссылку, когда область изоляции будет уничтожена. В противном случае код рискует привести к утечкам памяти.
Комментарии:
1. Ааа, вместо того, чтобы ждать, пока AngularJS скопирует значение из внутренней области во внешнюю, я отправляю обратный вызов, который немедленно получает значение и может сразу сохранить его во внешней области. Попробую сегодня!