角度： `<span> '要素で動作しないng-modelディレクティブ

Question

現在、ブートストラップとangular.jsを使用しているWebアプリケーションで作業していますが、デフォルト値のspanをHTMLに埋め込んで設定していましたページの1つのコード。

以前は、ng-modelを使用して、別のファイルにある角度コントローラーのHTMLコード内のHTML要素の値を設定および変更できました。私は、HTMLページの要素で使用することができます$scope変数の属性を設定することができるよ、この内

angular.module('mediaPlaylistApp', []) 
    .controller('mediaPlaylistCtrl', ['$scope', 'sharedProperties', ....., 
     function($scope, sharedProperties, .....,){ 
     //many lines of code in here 
}]); 

：これは、コントローラがどのように見えるかです。例えば、私は、上記コントローラに以下JSラインをチェックするチェックボックスを設定することができる：

$scope.areAllSelected = true; 

を、それが次のHTMLコードと組み合わせて使用​​される場合：

<input type="checkbox" ng-model="areAllSelected"> 

これは、動作します期待される。 の場合、このテクニックを別のspan要素に対して複製しようとすると、私の問題が発生します。

私は、これは角度コントローラにラインJS挿入します。期待通りspanは空白のままとないとしてそれは、動作しません

<span ng-model="playlistName"> 
</span> 

：このHTMLコードと併せて

$scope.playlistName = 'Enter Playlist Name Here'; 

文字列'Enter Playlist Name Here'を表示します。この現象の原因は何ですか？ ng-modelはinput以外の要素では機能しないのですか、それとも簡単に間違っているのですか、まったく関係のない問題ですか？これについての助けに感謝します。ドキュメントから撮影

Answer 1

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

「はngModelディレクティブは、このディレクティブによって作成され、露出さNgModelControllerを使用してスコープのプロパティへの入力、SELECT、TEXTAREA（またはカスタムフォームコントロール）を、結合します"

はい、スパンでng-modelを使用することはできません。代わりにng-bindを使用できます。

<span ng-bind="playlistName"></span> 

代替あなたはあなたが正しい補間オペレータ{{}}

<span>{{playlistName}}</span> 

Why ng-bind is better than {{}} ?

Answer 2

でスコープに定義された値をラップすることができるということです。 ng-modelsは、要素の値を設定しますが、spanには固有の値がありません。

<span> 
{{playlistName}} 
</span>