玩轉angularJs——通過自定義ng-model，不僅僅只是input可以實現雙向數據綁定

 

體驗更優排版請移步原文：http://blog.kwin.wang/programming/angularJs-user-defined-ngmodel.html

 

angularJs雙向綁定特性在開發中很方便很實用，但是由於ng-model一般只能掛在input上，因此我們需要自定義ng-model來在div等元素上使用該標簽。

自定義指令：

//自定義ngModel的屬性
    .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);
                }
            }
        }
    }])

頁面中div可以這樣使用ng-model:

<div class="icon-arrow-title title-color-2" contenteditable="true" ng-model="param.MobileNum" style="right: 15px;"></div>

 

這樣，雙向數據綁定就可以了。