角度指令中的雙向綁定導致循環

我有一個指令，其中有select。這是一個簡單的例子。請注意真實的代碼有更多的移動部分和一些邏輯。角度指令中的雙向綁定導致循環

app.directive('numberPicker', function() { 
    return { 
     restrict: "E", 
     scope: { 
      number: "=model", 
     }, 
     template: "<select data-ng-model='numberName' data-ng-options='name for name in numberNames' class='form-control'></select>", 
     link: function(scope, element, attrs) { 
      scope.numberNames = ["Zero", "One", "Two"]; 

      scope.$watch('number', function(number) { 
       scope.numberName = scope.monthNames[number]; 
      }); 

      scope.$watch('numberName', function(numberName) { 
       scope.number = scope.numberNames.indexOf(numberName); 
      }); 
     } 
    }; 
})

在外部範圍內有一個數字綁定到select的想法。綁定應該是雙向的。

問題是，$watch es觸發對方，導致奇怪的行爲。

我應該如何通過查找將範圍綁定到select，並通過反向查找選擇回範圍？

來源

2014-10-01 Joe

實現一個爲函數。 'scope.number = function（）{return scope.numbernames.indexOf（numberName）;}'，所以不需要手錶。 – Chandermani 2014-10-01 15:06:07

'ng-data-model'是否可以使用函數？它如何知道何時更新？ – Joe 2014-10-01 15:28:08

對，ng-model需要賦值表達式，你可以將函數scope.numberName作爲函數反轉。 – Chandermani 2014-10-01 15:57:50

您可以使用下面的邏輯作爲工作周圍，但不認爲這是一個很好的解決方案

scope.$watch('number', function(number) { 
    if(scope.numberName != scope.monthNames[number]){ 
     scope.numberName = scope.monthNames[number]; 
    } 
}); 

scope.$watch('numberName', function(numberName) { 
    if(scope.number != scope.numberNames.indexOf(numberName)){ 
     scope.number = scope.numberNames.indexOf(numberName); 
    } 
});

來源

2014-10-01 15:05:31

它的工作原理，謝謝。必須有一個通用的解決方案，但這種問題...... – Joe 2014-10-01 16:28:59

角度指令中的雙向綁定導致循環

回答

相關問題