Angularjs jquery binding between states

Question

Let's say I have two states:

.state('page1', {
    url: '/page1',
    templateUrl: 'pages/templates/page1.html',
    controller: 'page1'
})

.state('page2', {
    url: '/page2',
    templateUrl: 'pages/templates/page2.html',
    controller: 'page2'
})

They both have the element <div id="clickme'>DO IT</div>.

In one controller I have:

$("body").on('click', '#clickme', function(e) { alert("clicked"); });

But not on the other controller.

What is the most effective way to restart my bindings if I have a lot of these separately going on within my different controllers?

I don't want them to be active when I switch state's because some things may overlap or just want to make sure nothing overlaps.

In the Angular way you should not do DOM manipulation in the controller, But to your question when a new state is loaded, the old template will be removed and the new one loaded. — shivas, Apr 27 '15 at 20:53
There are very few cases you should be using jQuery with angular. For example if you want to listen to a button click event, you'd use ng-click on the element, and have a function on your scope in the controller that is called on click. No jQuery required. — Daniel Gimenez, Apr 27 '15 at 20:53
ah okay, I will do that then. sorry, I am new to angular @DanielGimenez. — bryan, Apr 27 '15 at 20:54
Must read:[thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Apr 27 '15 at 20:55

score 1 · Accepted Answer · edited May 23 '17 at 12:06

The most efficient way is not to do it at all. As the comments have pointed out, you probably shouldn't be using jQuery in your Angular code. Its just not the Angular way.

What you probably want is some directives:

.state('page1', {
    url: '/page1',
    template: '<page1>',
    controller: 'page1'
})

.state('page2', {
    url: '/page2',
    template: '<page2>',
    controller: 'page2'
})

And then in your directive code you will have something like

.directive('page1', function() {
  return {
    template: '<div ng-click="doIt()">DO IT</div>',
    link: function($scope){
      $scope.doIt = function(){...}
    }
  };
});

Angularjs jquery binding between states

1 Answers1