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); 
}