角度指令中的双向绑定导致循环

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的想法。绑定应该是双向的。

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

我应该如何通过查找将范围绑定到选择，并通过反向查找选择回范围？

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