角度方向的双向绑定导致循环

Question

我有一个带有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绑定的想法。绑定应该是双向的。

问题是$watches相互触发，导致奇怪的行为。

我应该如何通过查找将作用域绑定到select，并通过反向查找将select绑定回作用域？

Answer 1

您可以使用以下逻辑作为解决方案，但不要认为这是一个优雅的解决方案

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