Question

I am using an jquery plugin on a dropdown and I am also using Angular js to update content based on what I am selecting. The problem I am having Angular watch does not work with the jquery plugin, removing the plugin makes everything work but I can not remove it because I need to use it. Here is my code:

<select id="chart_csv" ng:model="report">
    <option value="cancel">Cancel</option>
    <option value="rate">Rate</option>
</select>  

And I have this jquery plugin that I use on on the dropdown:
jquery plugin: http://designwithpc.com/Plugins/ddSlick

jQuery(function($){
    $('#chart_csv').ddslick({
        width:300,
        selectText: "Select your csv output",
        imagePosition:"right" 
    });        
});

In angular I have the following code:

$scope.$watch("report", function() {
    switch ($scope.report) {
        case "cancels":                
            //update some content              
        case "rate":       
           //update other content

        default:
           // default here
    }
});

How can I make angular listen for the change that is triggered by the jquery plugin?

Answer 1

In the comments above, you asked me how you could write such a directive. Well, like all of JavaScript, there’s a lot of ways to skin this cat, so I’ll give you the basics and you can probably come up with something that suits you, as I’m not really familiar with the plugin you’re trying to use:

app.directive('myDdslick', function($parse) {
  return {
     restrict: 'A', //this is an attribute,
     link: function(scope, elem, attr, ctrl) {
         var model = $parse(attr.myDdslick);
         elem.ddslick({
            width:300,
            selectText: "Select your csv output",
            imagePosition: "right" 
         };
         elem.change(function(){
           model.assign(scope, elem.val());
         });
     }
  }
});

Then your markup would be something like this:

<select id="chart_csv" my-ddslick="report">
    <option value="cancel">Cancel</option>
    <option value="rate">Rate</option>
</select>

None of that is tested, but it’s the basic idea. On it’s surface, it seems like ng-model should have just worked. If the above doesn’t work, then maybe the change event on the select isn’t firing because the plugin is setting the value programmatically.

I hope that helps.