Angular：ng-model directive not working with'<span>`element

我目前正在研究一個使用bootstrap和angular.js的web應用程序，並且我遇到了一些困難，將默認值span設置爲嵌入HTML其中一個頁面的代碼。Angular：ng-model directive not working with'<span>`element

此前，我可以使用ng-model來設置和修改單獨文件中角度控制器中HTML代碼中HTML元素的值。這是控制器的樣子：

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

在此，我能夠設置然後可以通過HTML頁面上的元素所使用的$scope變量的屬性。例如，我可以設置一個複選框來與上述控制器的以下JS線進行檢查：

$scope.areAllSelected = true;

當在結合使用用下面的HTML代碼：

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

這個工作過程預期。但是，當我嘗試爲不同的span元素複製此技術時，出現了我的問題。

當我插入這個JS線成的角控制器：

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

與此HTML代碼結合：

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

如預期它不工作，因爲span保持空白，而不顯示字符串'Enter Playlist Name Here'。什麼可能導致這種行爲？ ng-model不適用於input以外的其他元素嗎？或者這是我犯的一個簡單錯誤還是一個完全不相關的問題？任何幫助，將不勝感激。

來源

2017-08-01 ajc2000

從文檔摘自：https://docs.angularjs.org/api/ng/directive/ngModel

「的ngModel指令結合輸入，選擇，文本區域使用NgModelController（或定製的形式控制）上的範圍的特性，其被創建並暴露通過這個指令「。

是的，您不能使用ng-model span。相反，您可以使用ng-bind。

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

另一種方法是，您可以用插值算{{}}

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

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

來源

2017-08-01 18:29:50 Vivz

ng-bind與1/2路綁定的操作與{{}}相同。 – Phix

是的你是對的@Phix – Vivz

你是正確的包裝上範圍定義的值。 ng-models設置元素的值，而span沒有固有值。您必須像這樣顯示它：

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

來源

2017-08-01 18:31:17

Angular：ng-model directive not working with'<span>`element

回答

相關問題