Call jQuery function by Angular view

Question

Is there a way to call a jQuery function only in a certain Angularjs controller/view? For example, I want to call the slides function only in the home view.

Slides:

$('.slides').superslides();

app.js:

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
     templateUrl : 'views/home.html',
     controller  : 'mainController'
 });

 $locationProvider.html5Mode(true).hashPrefix('!');

 }]);

 myApp.controller('mainController', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
   $location.hash(id);
   $anchorScroll();
  }
 });

Christopher Marshall · Accepted Answer · 2015-04-28 21:24:58Z

3

Create a directive.

JS:

 myApp.directive( "superslides",
        function()
        {
            return {
                restrict: "A",
                scope: {},
                link: function ( scope, element, attrs )
                {
                    $( element ).superslides();
                }
            }
        }
    )

html:

<ul superslides>
</ul>

answered Apr 28, 2015 at 21:24

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

floribon Over a year ago

without isolating the scope would be better

Collectives™ on Stack Overflow

Call jQuery function by Angular view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related