Как использовать js плагин в angularjs?

Question

[schurenkov]

Есть вьюха

<div id="vl-global">	       
            <div id="ng-container" ng-view ></div>
        </div>

в которой выводятся шаблоны, в одном из шаблонов хочу чтобы работал плагин typed.js
пытаюсь сделать через дерективу но ничего не происходит

.directive('myDatepicker', function() {
   return {
        require: 'ngModel',                        
        link: function (scope, element, attrs, slideShowCtrl) {                                                                                                                  
			 $(function(){
        $(".element").typed({
            strings: ["First sentence.", "Second sentence."],
            typeSpeed: 0
        });
    });                                         
  }
 }
}),

пытался сделать еще вот так но тоже не сработало

.controller('updateController',['$scope',function($scope){
$scope.updates = ['This is update 1',
'This is the second update!'];
$(function(){
    $(".update-box p").typed({
      strings:$scope.updates,
      typeSpeed: 40,
      loop: true,
      backDelay: 1500,
      contentType: 'text',
      loopCount: false,
      cursorChar: " |"
    });
  });
}]);

Answer 1

[ImSokel]

Проверьте существует ли в dom эти элементы перед тем как вы вешаете на них плагин.
по простому :
console.log( $(".element"));
Если нет:
Плохой и костыльный вариант решения будет состоять в том, что бы дождаться появления этих элементов:

.directive('myDatepicker', function() {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, slideShowCtrl) {
            setTimeout(function() {
                $(".element").typed({
                    strings: ["First sentence.", "Second sentence."],
                    typeSpeed: 0
                });
            });
        }
    }
}),

А если по честному, то одним из самых лучших способов будет повесить на эти элементы определенную директиву. Например так я раньше делал для wysihtml5 редактора:

.directive('wysiwygComponent', function() {
        return {
            templateUrl: 'template/partials/wysiwygComponent.html',
            restrict: 'A',
            link: function(scope, element, attrs) {
                /** Инициализируем редактор кода после появления директивы **/
                var txt = $(element).find("textarea");
                txt.wysihtml5({
                    locale: "ru-RU",
                    toolbar: {
                        "html" : true,
                    },
                    stylesheets: [],
                    events: {
                        "blur": function() {
                            scope.$apply(function() {
                                var html = txt.siblings("iframe").contents().find("body").html();
                                scope.modelModel = html;
                            });
                        }
                    }
                });
                /** следим за изменением содержимого в редакторе **/
                scope.$watch('modelModel', function(val) {
                    txt.siblings("iframe").contents().find("body").html(val);
                });
            },
            scope: {
                label:'@',
                modelModel:'='
            }
        };
    })

Модель передается через model-model аттрибут.

Comments

[schurenkov]

Спасибо большое помогло