Как применить jquery после частичного шаблона AngularJS

Ответ 1

Когда вы укажете свои маршруты, вы также можете указать контроллер, поэтому ваши маршруты будут выглядеть так:

var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
        when('/about',{templateUrl:'app/partials/about.html', controller: 'aboutCtrl'}).
        when('/contact',{templateUrl:'app/partials/contact.html', controller: 'contactCtrl'}).
        otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html', controller: 'homeCtrl'})
    });

Теперь вы можете определить внутри каждого контроллера то, что вы хотите сделать, jquery-wise, как часть функции, например:

angular.module('website').controller('aboutCtrl', ['$scope', function ($scope) {

   $scope.load = function() {
       // do your $() stuff here
   };

   //don't forget to call the load function
   $scope.load();
}]);

Имеют смысл?

Ответ 2

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

Чтобы сделать это реальным способом "Angular", как указано в комментариях, вы должны использовать директиву. Преимущество этого в том, что вы можете создать несколько экземпляров с одним и тем же кодом и можете передавать атрибуты в директивную логику, чтобы "настроить" эту директиву. Здесь образец пути, который я использовал, используя bxSlider плагин:

JS:

app.directive('slider',  ['$rootScope', function($rootScope) {
return {
    restrict: 'EA',
    templateUrl: '/path/to/template',
    link: function(scope, iElement, attrs) {
        //attrs references any attributes on the directive element in html

        //iElement is the actual DOM element of the directive,
        //so you can bind to it with jQuery
        $(iElement).bxSlider({
            mode: 'fade',
            captions: true
        });

        //OR you could use that to find the element inside that needs the plugin
        $(iElement).find('.bx-wrapper').bxSlider({
            mode: 'fade',
            captions: true
        });

       }
    };
}]);

HTML:

<div slider some-attibute="some-attribute"></div>

И внутри шаблона директивы вы можете иметь оболочку слайдера и слайды, которые вы могли бы динамически строить, используя привязку ng-repeat к данным области.

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

Ответ 3

У меня была та же проблема, я загружал некоторые ссылки для навигации в ng-include, и у меня есть файл script, который вызывается на моем index.html с инструкциями jquery, чтобы сделать ссылки активными, и я не вижу включенного содержимого.

Я попробовал все вышеупомянутые решения, и по некоторым причинам ни один из них не работал у меня. Когда содержимое не включено (прямо в index.html), jquery удары в порядке, но после включения он прекратил распознавать мои элементы.

Итак, я просто завернул свои инструкции в функцию setTimeout(), и это сработало! Может быть, это сработает и для вас?

setTimeout(function() {
    $("nav ul li").click(function() {
        $("nav ul li").removeClass('active');
        $(this).addClass('active');
    });
});

Каким-то образом setTimeout() управляет загрузкой script ПОСЛЕ angular, выполняется загрузка включенного содержимого.

Счастливое кодирование всех!

Ответ 4

Директива, безусловно, является хорошим вариантом, но вы также можете добавить контроллер к любому частичному, который будет выполнять все задачи (также с помощью jQuery, если хотите) после частичной загрузки:

Пример: partials/menu.html

<div ng-controller="partialMenuCtrl">
   ...
</div>

Ответ 5

У меня была такая же проблема, я работал с слайдером Jquery slick на простой странице html, и он работал нормально. Как это работает в основном путем включения файла slick.min.js под файлом jquery.min.js, а затем в тегах script вам нужно инициализировать плагин с такими параметрами, как например.

$('.items').slick({
   infinite: true,
   slidesToShow: 3,
   slidesToScroll: 3
});

теперь возвращаясь к проблеме, когда я добавил Angular JS на свою страницу и сделал частичную страницу, а затем вернулся в браузер, чтобы проверить погоду, страница работает нормально или нет, страница работает нормально, кроме слайдер. Затем я попытался перенести эти slick.min.js и инициализацию плагина на частичные, и он работал:)

Как это работает Я не знаю причины, так как я новичок в Angular, но это сработало, и мне все еще интересно, почему.

Ответ 6

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

$("#anyDivOrDocument").on('click', '#targetDiv', function(event) {
   event.preventDefault();
   alert( 'working' ); 
});

Ответ 7

Я купил шаблон html5 и попытался интегрироваться с моим веб-приложением angularJS. Я столкнулся с той же проблемой. Я решил это, используя:

Поместите код ниже, где вы поместите код <script src="vendor/61345/js/script.js"></script>.

<script>
   document.write('<script src="vendor/61345/js/script.js"><\/script>');
</script>