jquery和angular.js不能在下拉菜單上工作

我在下拉菜單上使用了一個jquery插件，而且我還使用Angular js根據我選擇的內容來更新內容。我有Angular手錶的問題不適用於jquery插件，刪除插件使一切正常，但我不能刪除它，因爲我需要使用它。這裏是我的代碼：jquery和angular.js不能在下拉菜單上工作

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

如何讓角度監聽由jquery插件觸發的更改？

來源

2012-10-05 Mythriel

您需要創建一個知道要監聽的指令，或者您將不得不嘗試使用ng-model =「report」添加一個隱藏輸入，並更新該值那個。該指令可能是要走的路。 –

我試圖做到這一點，它不工作:)也許我做錯了或什麼 – Mythriel

我應該如何寫這樣的指示？ – Mythriel

在上面的評論中，您問我如何編寫這樣的指令。那麼，就像所有的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上的更改事件可能不會觸發，因爲插件正在以編程方式設置值。

我希望有幫助。

來源

2012-10-05 14:07:02

jquery和angular.js不能在下拉菜單上工作

回答

相關問題