0

我正在尝试将时间值拆分为 2 个组件，即时间和子午线，但将它们都链接到相同的 ng-model 值。我的想法是为值设置验证器，以相应地格式化和解析这些值。但我似乎无法从验证器指令中设置选择框的选定选项。

我有一个用以下数组填充的选择

$scope.timeMeridians   =  [ {id:'am', value:'AM'}, 
                            {id:'pm', value:'PM'}];

并且指令make如下

<select ng-model="editingEvent.start_date_time" 
 ng-options="option as option.value for option in timeMeridians" 
 ub-meridian-validator>

以及到目前为止的验证器骨架...

angular.module('app.MeridianValidator',[])
.directive('ubMeridianValidator',function($timeout){
    return {

        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl){
                    var valueType;
        // sets model based on view
        ctrl.$parsers.unshift(function(viewValue){
                    return moment().format('YYYY-MM-DD HH:mm Z');
        });
                    // set the view format
        ctrl.$formatters.unshift(function(viewValue){      
                    return scope.timeMeridians[0];
        });
    }
};

注意我现在已经硬编码了选择逻辑，直到我看到值发生变化。

所以基本上目前，无论传递给它什么值，viewValue 格式化程序都应该返回 timeMeridians[0] （即'AM'），但我不会更改视图中的值......

我在它旁边创建了一个输入并将其连接起来以复制动作，所有更改都显示在那里很好，并且这种通过引用 timeMeridians 数组中的位置来设置选择值的方法在控制器上工作正常，所以为什么不在格式化程序指令中？

请帮忙 ：）

4

1 回答 1

1

从那以后，我意识到这是对 Angular JS 格式化程序的错误使用。实现此目的的正确或更好的方法是使用 ng-change 指令，该指令将调用控制器函数来执行更新。如果您一心想要保留相关控制器的此功能并因此使时间输入可重用，那么您应该将该功能封装到具有自己控制器的指令中。

于 2014-03-12T22:31:39.857 回答