Инициализация плагинов jquery в директивах angularjs

Question

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

Допустим, я хочу использовать плагин ввода тегов, такой как this. Я определяю угловую директиву, называемую тегами, и внутри нее, инициализирует tagin ввода текста. Текстовый элемент привязан к модели, которая заполняется контроллером из службы.

У меня есть это в Plunker here.

Проблема заключается в том, когда директива нагрузки, модель еще не заселена, поэтому tagsinput плагин инициализируется с пустым значением. Но я хочу, чтобы он был инициализирован с использованием значения на стороне сервера. Я часто сталкивался с этой проблемой, и я прибегал к инициализации моих плагинов в обратных вызовах службы внутри контроллеров, которые, как я знаю, являются кардинальным грехом.

Я не могу сообразить, что в конце концов, на некотором уровне инициализация плагина должна быть отложена до тех пор, пока служба не вернется, поэтому значение будет доступно. И могу ли я исправить, если я скажу, что даже в угловом способе делать это так или иначе достигнуто? Но в любом случае я не могу понять, как это сделать.

Answer 1

Я думаю, что лучший способ решить эту проблему - использовать наблюдателя внутри вашей директивы.

var app = angular.module('app', []); 

app.controller('Main', function ($scope, $timeout) { 

    //this simulates data being loaded asynchronously after 3 second 
    $timeout(function() { 
     $scope.list = [1, 2, 3, 4]; 
    }, 3000); 

}); 

app.directive("mydirective", function() 
{ 
    return { 
     restrict: "A", 
     link: function(scope, element, attrs) 
     { 
      scope.$watch('list', function (newVal, oldVal) { 
       if (newVal) { 

        //initialize the plugns etc 
        scope.result = 'Model has been populated'; 
       }  
      }); 
     } 
    }; 
}); 

В моем примере я использую $ таймаут внутри контроллера для имитации асинхронной нагрузки данных после того, как модель «список» получает заполняется наблюдающий внутри директивы будет реализовать его (newVal не является пустым или неопределенным) и затем плагин может быть инициализирован. Это лучший подход вместо обратных вызовов внутри контроллера, потому что ваш код намного более краткий.

Вот jsBin

EDIT:

Просто помните, что цикл дайджеста должен быть уволен, если модель заполняется. Если вы используете $ resource или $ http для получения данных с сервера, вам не нужно беспокоиться, но если вы делаете это за пределами Углового, вам придется запустить цикл дайджеста с помощью $ scope. $ Apply(), поэтому наблюдатель может знать, что модель была заполнена.

Answer 2

Поскольку Бертран сказал, что это возможно, используя наблюдателей в директивах link. Вам нужно дождаться появления данных, и для этого нужны наблюдатели. Взгляните на мое обновление вашего плундера здесь http://plnkr.co/edit/hb3UYl.

Я подделал асинхронный отклик с $timeout вместо $http, но здесь это не имеет никакого значения.

Что он делает, это настроить наблюдателя в функции ссылки директивы, которая ищет изменения $scope.list. Если изменения обнаружены, а newValue - это что-то полезное, он использует его для заполнения поля ввода и превращения его в список тегов.

Уведомление: Я сменил $('.taginput') на element, так как это вы действуете. Также я считаю, что это хорошая практика для поиска элементов DOM, которые вы хотите манипулировать только по иерархии текущего element. Это делает вас уверенным, что если вы укажете директиву по данному элементу - никакие другие элементы, кроме этого и его детей, не будут затронуты.