angular.js - 求解:angular ngModel.$render 值改變時,沒有自動調用
伊谢尔伦
伊谢尔伦 2017-05-15 16:53:26
0
1
455

最近要用angular做一個所見即所得的編輯器,在自訂ngModel的$render方法式,出現問題。程式碼如下:

html部分:

<p ng-controller="EditController">
        <p contenteditable="true" edit-box ng-model="vm.content" style="width: 300px; height: 100px;border: 1px solid dodgerblue;"></p>
        <p ng-bind-html="vm.content|trustAsHtml"></p>
    </p>

angular部分:

angular.module('myApp',[])
            .controller('EditController',function($scope){
                $scope.vm={
                    content:''
                };
            })
            .filter('trustAsHtml',function($sce){
                return function(content){
                    return $sce.trustAsHtml(content);
                }
            })
            .directive('editBox',function(){
                return {
                    restrict:'EA',
                    require:'ngModel',
                    link:function(scope,element,attr,ngModelCtrl){
                        if(!ngModelCtrl)return;

                        //覆盖默认的$render方法
                        ngModelCtrl.$render=function(){
                            element.html(ngModelCtrl.$viewValue);
                        };

                        //向formatters流水线增加一个格式化方法
                        ngModelCtrl.$formatters.unshift(function(value){
                            console.log(value);
                           return value;
                        });
                        //绑定输入事件监听,当输入时,改变ngModel的值
                        element.bind('input',function(){
                           scope.$apply(function(){
                              ngModelCtrl.$setViewValue(element.html());
                           });
                        });
                    }
                }
            });

依照教程上的說法,當viewValue的值改變時,ngModelCtrl.$render會被調用,包括formatters,parsers這一系列的管線。我也是照教程上寫的,但只有在指令初始化的時候render及formatters被調用了一次,然後輸入時並會沒有被調用,難道需要手動調用render嗎,請各位大神賜教。

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!