Принудительная двусторонняя привязка для вступления в силу

#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 скопирует значение из внутренней области во внешнюю, я отправляю обратный вызов, который немедленно получает значение и может сразу сохранить его во внешней области. Попробую сегодня!