ng-model的作用及一般元素实现双向绑定

ng-model的作用主要是双向绑定，纯粹输出的话用{{}}方法就可以了。所以ng-model一般是用在有输入功能的元素上，也就是表单和contentEditable的元素上。
要在contentEditable元素上使用需要增加一个directive。

.directive('contenteditable',[ '$window',function() {
                return {
                    restrict : 'A',require : '?ngModel',// 此指令所代替的函数
                    link : function(scope,element,attrs,ngModel) {
                        if (!ngModel) {
                            return;
                        } // do nothing if no ng-model
                        // Specify how UI should be updated
                        ngModel.$render = function() {
                            element.html(ngModel.$viewValue || '');
                        };
                        // Listen for change events to enable binding
                        element.on('blur keyup change',function() {
                            scope.$apply(readViewText);
                        });
                        // No need to initialize,AngularJS will initialize the
                        // text based on ng-model attribute
                        // Write data to the model
                        function readViewText() {
                            var html = element.html();
                            // When we clear the content editable the browser
                            // leaves a <br> behind
                            // If strip-br attribute is provided then we strip
                            // this out
                            if (attrs.stripBr && html === '<br>') {
                                html = '';
                            }
                            ngModel.$setViewValue(html);
                        }
                    }
                }
            } ]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!