2016-12-25 9 views
3

Angularjsの新機能ですが、ユーザーがコメントを記述できるコメント領域のコードを記述しようとしています。これに対して、私はcontendeditable = "true"プロパティを持つdiv要素を使用しています。ここでは、HTMLのための私のコードは次のとおりです。Angularjs ng-modelはdiv要素ではないinput要素の変数を更新します

<html> 
    <script src="./includes/angular.min.js"></script> 
    <script src="./includes/angular.route.js"></script> 
    <script src="./includes/angular.sanitize.js"></script> 
    <script src="./includes/test.js"></script> 
    <body ng-app="testapp" ng-controller="cnt1"> 

     <div contenteditable="true" ng-model='comment'>{{comment}} </div> 
     <input ng-model='comment' type='text'/><br> 

     <div>{{comment}}</div>  
    </body>  
</html> 

、ここでは、.jsファイルのコードは、NG-モデルが入力要素に「コメント」の変数を更新しますが、そうでない理由を私は理解していない

/// <reference path="./angular.min.js" 
/// <reference path="./angular.route.js" 
/// <reference path="./angular.sanitize.js" 
/// <reference path="./jq/jquery-2.0.3.min.js" 
/// <reference path="./moment.min.js" 
/// <reference path="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" 

var app = angular.module("testapp", ['ngRoute', 'ngSanitize']); 
app.controller("cnt1", function ($scope, $http, $rootScope, $timeout) { 
    $scope.comment = "type here"; 

}); 

ですdiv要素の変数を更新してください!どんな助けもありがとう! $ apply()でこれを修正できる場合は、div要素の "comment"変数を更新するためにどうすればよいですか?

答えて

5

https://docs.angularjs.org/api/ng/directive/ngModel

ngModelディレクティブは、この指令によって作成され、露出さNgModelControllerを使用してスコープ、上のプロパティにinputselecttextarea(またはカスタムフォームコントロール)と結合します。

divはここにリストされていません。あなたはまだワットdiv /動作するように探しているなら:(

、ここでは例を見てみましょう!https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#custom-control-example

関連する問題