43

次の例で、最初にレンダリングされた値が{{ person.name }}ではなくになっているのはなぜDavidですか? これをどのように修正しますか？

実例はこちら

HTML:

<body ng-controller="MyCtrl">
  <div contenteditable="true" ng-model="person.name">{{ person.name }}</div>
  <pre ng-bind="person.name"></pre>
</body>

JS:

app.controller('MyCtrl', function($scope) {
  $scope.person = {name: 'David'};
});

app.directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      // view -> model
      element.bind('blur', function() {
        scope.$apply(function() {
          ctrl.$setViewValue(element.html());
        });
      });

      // model -> view
      ctrl.$render = function() {
        element.html(ctrl.$viewValue);
      };

      // load init value from DOM
      ctrl.$setViewValue(element.html());
    }
  };
});
4

5 に答える 5

46

問題は、補間がまだ終了していないときにビュー値を更新していることです。

だから削除

// load init value from DOM
ctrl.$setViewValue(element.html());

またはそれを置き換える

ctrl.$render();

問題を解決します。

于 2013-01-28T12:37:51.160 に答える
14

簡潔な答え

次の行を使用して、DOM からモデルを初期化しています。

ctrl.$setViewValue(element.html());

コントローラーで値を設定しているので、明らかに DOM から初期化する必要はありません。この初期化行を削除するだけです。

長い答え（そしておそらく別の質問へ）

これは実際には既知の問題です: https://github.com/angular/angular.js/issues/528

ここで公式ドキュメントの例を参照してください

HTML:

<!doctype html>
<html ng-app="customControl">
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <form name="myForm">
     <div contenteditable
          name="myWidget" ng-model="userContent"
          strip-br="true"
          required>Change me!</div>
      <span ng-show="myForm.myWidget.$error.required">Required!</span>
     <hr>
     <textarea ng-model="userContent"></textarea>
    </form>
  </body>
</html>

JavaScript:

angular.module('customControl', []).
  directive('contenteditable', function() {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      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(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          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);
        }
      }
    };
  });

プランカー

于 2013-09-10T10:50:27.187 に答える