Angular 1.5 组件 + ng-model $formatters 和 $parsers

Posted 2023-03-13

【中文标题】Angular 1.5 组件 + ng-model $formatters 和 $parsers

【英文标题】：Angular 1.5 Components + ng-model $formatters and $parsers

【发布时间】：2017-07-28 10:56:14

【问题描述】：

我想知道如何将 $formatters 和 $parsers 与 angular 1.5 组件一起使用。谁能发个例子。

或者我可以使用类似的东西。

【问题讨论】：

使用 ng-form directive 将 API 绑定到范围。 （不要将ng-model 与组件隔离范围绑定。）然后阅读AngularJS Developer Guide - Implementing Custom Form Controls Using ng-model

我很乐意看到这个问题得到一个很好的答案。 @georgeawg 为什么不“将 ng-model 与组件隔离范围绑定”？

这个问题长期以来没有得到解答的原因可能是因为组件的绑定/返回模型的单一方式让这个问题变得没有意义。如果您要避免双向绑定（这始终是一个好主意），您可以在用户弄乱值时转换您的模型 => 视图 $onInit 和视图 => 模型（通过调用更新 ('&') 函数并使用 ng-change 或其他一些用户触发的操作传递新值。

我也很想看到这个问题的答案。

我很快就会发布一个例子。我们一直在我们的应用程序中使用双向绑定。

【参考方案1】：

以下是名为example 的组件的示例。这需要一个包含firstName 和secondName 的对象。然后它显示firstName 和secondName 的组合。如果对象从外部更改，格式化程序将触发，然后是渲染。如果你想从内部触发变化，你需要调用this.ngModel.$setViewValue(newObject)，这会触发解析器。

    class example 
        /*@ngInject*/
        constructor() 

        // In the post link we need to add our formatter, parser and render to the ngmodel.
        $postLink() 
            this.ngModel.$formatters.push(this.$formatter.bind(this));
            this.ngModel.$parsers.push(this.$parser.bind(this));
            this.ngModel.$render = this.$render.bind(this);
        

        // The formatter is used to intercept the model value coming in to the controller
        $formatter(modelValue) 
            const user = 
                name: `$modelValue.firstName $modelValue.secondName`
            ;

            return user;
        

        // The parser is used to intercept the view value before it is returned to the original source
        // In this case we want to turn it back to it's original structure what ever that may be.
        $parser(viewValue) 
            // We know from out formatter that our view value will be an object with a name field

            const namesParts = viewValue.name.split(' ');

            const normalisedUser = 
                firstName: namesParts[0],
                secondName: namesParts[1],
            ;

            return normalisedUser;
        

        // This will fire when ever the model changes. This fires after the formatter.
        $render() 
            this.displayName = this.ngModel.$viewValue.name;
        
    

class ExampleComponent

    bindings = ;
    controller = Example;
    require = 
        ngModel: 'ngModel',
    ;


component('example', new ExampleComponent());


    // Template for example component
    <span>
         $ctrl.displayName 
    </span>

    // Using the above component somewhere    
    <example ng-model="userModel"></example>