Угловой js get div element issue

Question

Я пытаюсь получить значение элемента div с помощью ng-click, но на него приходит предупреждение 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

На самом деле нг-модель должна быть использование на входах.

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

Это создаст $ scope.myName var и привяжет его к входному контенту.

Если вы intitialize в Myname в вашем JavaScript и хотите, чтобы она будет отображаться в этом Div вы должны использовать этот синтаксис:

JS

$scope.myName = "Ben"; 

HTML

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

В обоих случаях ваш щелчок на кнопке не будет отображаться undefined, если вы не инициализировали его до щелчка (на втором примере).

Надеюсь, это помогло.

директива

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

Edit: с помощью ngInit вне ngRepeat считающийся bad practice, инициализировать объем vars в контроллере

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