ngModelController

一些小修改

Author: OOP-Code-Bunny

ngModelController/index.html

@@ -17,7 +17,7 @@ <h1>ngModelController- <small>创建一个实现了双向数据绑定的可编
   </div>
   <form role="form" name="myForm">
     <div class="form-group">
-      <div contenteditable name="myWidget" ng-model="userContent" ng-model-options="{debounce:1000}" class="form-control" required valid-characters default-text="请输入内容"></div>
+      <div contenteditable name="myWidget" ng-model="userContent" ng-model-options="{debounce:1000}" class="form-control" required default-text="请输入内容"></div>
     </div>
     <div class="form-group">
       <button type="button" class="btn btn-default btn-primary" ng-click="setNone()">设置为'抱歉,我没有想输入的内容'</button>
@@ -56,6 +56,11 @@ <h3 class="panel-title">用户输入的内容为:</h3>
   </form>
 </div>
 
+<div class="container">
+  <a href="http://plnkr.co/edit/CbOS1nFosPDfQXvsGTyR?p=preview" class="btn btn-default" role="button">在线预览</a>
+</div>
+
+
 </body>
 </html>
 

ngModelController/script.js

@@ -15,19 +15,19 @@ app.directive('contenteditable',function(){
             }
             //一开始scope.userContent是空
             console.log(ngModel.$isEmpty(scope.userContent));
-            element.html(attrs.defaultText);
             ngModel.$setViewValue(attrs.defaultText);
             //调用了$setViewValue以后就不为空了,但是如果设置了ngModelOptions,则没用.
             console.log(ngModel.$isEmpty(scope.userContent));
             ngModel.$render = function(){
-                element.html(ngModel.$viewValue || attrs.defaultText)
+                element.html(ngModel.$viewValue || attrs.defaultText);
             };
             element.bind('focus',function(){
                 if(element.html()==attrs.defaultText){
                     element.html('')
                 }
             });
             element.bind('focus blur keyup change',function(){
+                console.log(scope.userContent);    //userContent这个实际的值应该是和$modelValue一致的.
                 ngModel.$setViewValue(element.html());
                 console.log('$viewValue为:'+ngModel.$viewValue);
                 console.log('$modelValue为:'+ngModel.$modelValue);
@@ -39,11 +39,6 @@ app.directive('contenteditable',function(){
     }
 });
 
-/*
- 调用$setViewValue并不会触发$render,但是userContent会被同步.
- 当直接修改了userContent这个值,则$render会被调用
-*/
-
 
 /*app.controller('Rollback',function($scope){
     $scope.resetWithRollback = function(e){