jquery 和 angular.js 在下拉列表中不起作用答案

【问题标题】：jquery and angular.js not working on a dropdownjquery 和 angular.js 在下拉列表中不起作用
【发布时间】：2012-10-05 12:56:55
【问题描述】：

我在下拉列表中使用 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" 
    });        
});

在角度我有以下代码：

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

        default:
           // default here
    }
});

如何让 Angular 监听 jquery 插件触发的变化？

【问题讨论】：

您需要创建一个知道要监听什么的指令，或者您将不得不尝试一些技巧，例如添加一个带有 ng-model="report" 的隐藏输入，并更新它的值。该指令可能是要走的路。
我试图做那个黑客，但它不起作用:) 也许我做错了什么
这样的指令应该怎么写？

标签： javascript jquery angularjs

【解决方案1】：

在上面的 cmets 中，您问我如何编写这样的指令。好吧，就像所有的 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 事件没有触发，因为插件正在以编程方式设置值。

希望对你有帮助。

【讨论】：