1

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

在角度我有以下代码：

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

        default:
           // default here
    }
});

如何让 Angular 监听由 jquery 插件触发的更改？

4

1 回答 1

3

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

我希望这会有所帮助。

于 2012-10-05T14:07:02.820 回答