Angular JS：從jquery更改輸入值不會更新ng-model

Question

我是AngularJS的新手。我正在嘗試編寫一個指令，它是一個輸入字段列表，當您按下逗號鍵（plunkr中的188號碼）時，它將觸發一個「完成」功能，以便更新模型。我在這個值列表的指令中有一個ng-repeat。

我也讀了一些關於使用範圍的帖子。$ apply但是在這種情況下似乎不起作用。有關如何訪問正在更改的ng-repeat中的項目或如何直接在該列表項目上更新ng-model的幫助？

如果您查看我的plunkr，請更改名稱並在末尾加逗號。在頂部區域，您可以看到模型的值。您可以看到逗號仍然存在，這不是我預期的行爲，因爲它不在輸入字段本身中。

代碼在這裏： http://plnkr.co/edit/PBzRD8fBQ6D1GCEC869K?p=preview

Answer 1

看看我建議的變化，也許這就是你想要的用例

http://plnkr.co/edit/YXtVTJSQNyJo7njdiu4Z

如果您有任何問題，我會給要求更多的反饋;）

你只是想阻止，進入輸入標籤

Answer 2

如果你只是想從鍵入逗號停止用戶，你可以做到這一點沒有jQuery的：

$html.on('keydown', 'li', function (e) { 
    if (e.keyCode === 188) { 
     return false; 
    } 
}); 

還有（只要我能用有限的上下文來講）沒有理由進行$編譯。您應該能夠只使用一個模板：

http://jsfiddle.net/VM285/

myApp.directive('mydirective', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      list: '=' 
     }, 
     link: function (scope, element, attrs) { 
      element.bind('keydown', function (e) { 
       if (e.keyCode === 188) { 
        e.preventDefault(); 
        return false; 
       } 
      }); 
     }, 
     template: '<div><ul ng-model="list"><li ng-repeat="item in list"><input ng-model="item.Name" type="text" /></li></ul></div>' 
    } 
}); 

服用後1頭更進一步，你可以這樣做完全沒有DOM操作：

http://jsfiddle.net/VM285/1/

myApp.directive('mydirective', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      list: '=' 
     }, 
     link: function (scope, element, attrs) { 
      scope.checkForComma = function(item) { 
       if (item.Name.indexOf(',') > -1) { 
        item.Name = item.Name.replace(/,/g, ''); 
       } 
      }; 
     }, 
     template: '<div><ul ng-model="list"><li ng-repeat="item in list"><input ng-model="item.Name" type="text" ng-change="checkForComma(item)" /></li></ul></div>' 
    } 
});