javascript - Angular-js : ng-repeat on a select element with a attribute directive

Question

我有一个关于名为 on-change 的元素的指令。这个想法是，当选定的值发生变化时，它会保存在范围变量中，然后另一个元素会拾取它。

我的问题是，如果元素是静态的，上面的工作正常，但如果我使用 ng-repeat，onchange 就会停止工作。

<select on-change="myvar" ng-repeat="(key, value) in dataset">
   <option value="{{key}}">{{value.name}}</option>
</select>

这是我的 onchange 指令:

.directive('onChange', function() {    
        return {
            restrict: 'A',
            scope:{'onChange':'=' },
            link: function(scope, elm, attrs) {            
                scope.$watch('onChange', function(nVal) { elm.val(nVal); });            
                elm.bind('blur', function() {
                    var currentValue = elm.val();                
                    if( scope.onChange !== currentValue ) {
                        scope.$apply(function() {
                            scope.onChange = currentValue;
                        });
                    }
                });
            }
        };        
    })

有什么办法可以解决这个问题吗？

谢谢

Answer 1

您可以使用 ng-model 和 $watch 来捕获任何更改。为了重用它，您实际上可以将代码稍微修改为 $watch ngModel。

(我只是猜测您的意思是使用多个选项创建一个 select ，而不是使用单个选项创建多个 select ，所以我相应地更改了它)

<select ng-model="myvar" on-change>
   <option ng-repeat="(key, value) in dataset" value="{{key}}">{{value.name}}</option>
</select>

新的链接功能:

link: function(scope, elm, attrs) {            
    scope.$watch(attrs.ngModel, function (newVal, oldVal) {
        if(newVal !== oldVal) {
            //Change happened, react accordingly
        }
    });
}

查看我的类似答案 here