Angular js得到div元素問題

Question

我想通過ng-click獲得div元素值，但它帶有一個警告undefined。 我的HTML是

<div ng-model='myName'>this is my name</div> 
<br/> 
<input type="button" value="Show Name" ng-click="showName()"/> 

腳本

$scope.showName = function(){ 
     var nameOne = $scope.myName; 
     alert(nameOne); 
    } 

如何來解決這個問題。謝謝。

Answer 1

<div>{{myName}}</div> 
<br/> 
<input type="button" value="Show Name" ng-click="showName()"/> 

腳本

$scope.showName = function(){ 
     var nameOne = $scope.myName; 
     alert(nameOne); 
    } 

Answer 2

其實NG-模式應該是對投入使用。

<input type="text" ng-model="myName"> 

這將創建一個$ scope.myName var並將其綁定到輸入內容。

如果intitialize在JavaScript的MYNAME，並希望它顯示在這個div你應該使用這樣的語法：

JS

$scope.myName = "Ben"; 

HTML

<div>This is my name : {{myName}}</div> 

在這兩種情況下，點擊按鈕不會顯示未定義，除非在點擊之前沒有初始化它（第二個例子）。

希望它有幫助。

Answer 3

ngModel指令不能用普通的div被使用（除非該元素是一個定製表單控件），見https://docs.angularjs.org/api/ng/directive/ngModel

<div ng-init="myName = 'this is my name'">{{ myName }}</div> 
<br/> 
<input type="button" value="Show Name" ng-click="showName()"/> 

Plunker here

編輯：使用ngInit以外的ngRepeat被認爲是一個bad practice，控制器初始化範圍變量

$scope.myName = 'this is my name'; 
$scope.showName = function() { 
    alert($scope.myName); 
}