jquery和angular.js在下拉列表上不起作用

Question

我在下拉列表中使用jquery插件，我还使用Angular js根据我选择的内容来更新内容。我使用Angular watch的问题不适用于jquery插件，移除该插件可以让一切正常工作，但我无法移除它，因为我需要使用它。下面是我的代码：

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

我在下拉列表中使用这个jquery插件: jquery plugin：http://designwithpc.com/Plugins/ddSlick

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

在angular中，我有以下代码：

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

        default:
           // default here
    }
});

如何让angular侦听由jquery插件触发的更改？

Answer 1

在上面的评论中，您问我如何编写这样的指令。嗯，像所有的JavaScript一样，有很多方法可以给这只猫剥皮，所以我将给你介绍一些基础知识，你可能会想出适合你的东西，因为我对你正在尝试使用的插件并不是很熟悉：

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());
         });
     }
  }
});

那么你的标记应该是这样的：

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

所有这些都没有经过测试，但这是基本的想法。从表面上看，ng-model似乎应该正常工作。如果上面的方法不起作用，那么可能是select上的change事件没有触发，因为插件是以编程方式设置值的。

我希望这能有所帮助。