angularjs: access jquery variable in angularjs controller

Question

angular js code

angular.module('myapp')
  .controller('PostsController',  function($scope, $window, $http){

  $scope.$watch('selectedCities', function(newValue, oldValue) {
     if(newValue === oldValue ){
      return;
    }
    //to call a jQuery variable wookmark

  }, true);
}

jquery code

 $(function ($) {
      var container = '#wookmark_container',
          $container = $(container),
          tileCount = 30,
          $window = $(window),
          $document = $(document),
          wookmark;

      // Initialize Wookmark
      wookmark = new Wookmark(container, {
        offset: 5, // Optional, the distance between grid items
        outerOffset: 10, // Optional, the distance to the containers border
        itemWidth: 260, // Optional, the width of a grid item
        autoResize: true
      });

    });

What I am trying to do is if a select options changes I would like to reload a wookmark jquery plugin.

Is it doable to call a jquery vairable in angularjs?

Thanks for any help.

You need to create directive for this one.

Shreejibawa
– Shreejibawa

2015-04-04 04:28:29 +00:00
Commented Apr 4, 2015 at 4:28 — Shreejibawa
– Shreejibawa, Commented Apr 4, 2015 at 4:28

linstantnoodles · Accepted Answer · 2015-04-04 04:28:21Z

1

You can reference any variable that's in the scope of your Angular controller.

It looks like you have woodmark defined inside its own function scope, which means you don't have access to it. To access it, you need to set it as a property of the global window object like so:

window.woodwork =  "initial value";

You can then reference it in your controller using $window service.

$window.woodwork = "updated value";

answered Apr 4, 2015 at 4:28

linstantnoodles

4,4101 gold badge25 silver badges24 bronze badges

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

Comments

C.P. · Accepted Answer · 2015-04-04 05:29:48Z

1

Try this,

Declare variable 'wookmark' in the parent or global scope i.e. outside ready block. This will make that variable accessible in the everywhere. You will be able to access it in angular's controller
```
var woomark;

$(function ($) {
   // Initialize Wookmark
   wookmark = new Wookmark(container, {...});
});
```
To reload the woomark plugin, you can give a call as shown below in your code.

angular.element(document.querySelector('#wookmark_container')).trigger('refreshWookmark');

or directly

$('#wookmark_container').trigger('refreshWookmark')

Here is the documentation link for 'refreshWookmark' https://github.com/GBKS/Wookmark-jQuery

edited Apr 4, 2015 at 5:29

answered Apr 4, 2015 at 5:16

C.P.

1,2224 gold badges15 silver badges33 bronze badges

Collectives™ on Stack Overflow

angularjs: access jquery variable in angularjs controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related