javascript - 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 插件: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 似乎应该刚刚起作用。如果上述方法不起作用，则可能是因为插件正在以编程方式设置值，所以选择上的更改事件未触发。

希望对您有所帮助。