2016-11-01 2 views
1

Я новичок в этом поле и пробовал это в течение длительного времени. Вы можете увидеть мою простую версию здесь: https://plnkr.co/edit/YeahrG28bT2izX8gMKor?p=previewПочему мой onclick не работает?

Не могли бы вы рассказать мне, почему мой onclick здесь не работает? Моя кнопка - 2signUp botton, Спасибо!

ЯШИ:

var app = angular.module('myApp', []); 

app.controller('mainControl', function($scope) { 
    $scope.logged = false; 
    $scope.visiter = true; 
    var sub1 = document.getElementsByClassName("haha")[0]; 
    sub1.onclick=function(){ 
    $scope.logged = !$scope.logged; 
    } 
}) 

HTML:

<!DOCTYPE html> 
<html lang="en" ng-app='myApp'> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="MainViewController.js"></script> 
</head> 
<body ng-controller="mainControl"> 
     <div ng-show="logged"> 
      <button>1Sign Up</button> 
      <button>Log In</button> 
     </div> 
     <div ng-show="visiter"> 
      <button class="haha">2Sign Up</button> 
      <button>Log In</button> 
     </div> 
     <div ng-show="logged"> 
      hello 
     </div> 

</body> 
+0

Вы используете 'document.getElementsByClassName ("ха-ха") [0]' 'но haha' это идентификатор. Вы должны использовать 'document.getElementById' – Rohit

+1

Почему вы не используете функциональность ng-click? – Falk

+1

См. @Falk, есть исключения, но обычно вам следует избегать смешивания углов с JQuery. – Jaco

ответ

4

Используйте угловой способ обработки события щелчка, не используйте document.getElementById() джаз, когда у вас есть угловые, чтобы сделать работу для вас.

Вот почему вы должны позволить угловую ручку это

Связывание данных

привязки данных является автоматическим способом обновления зрения всякий раз, когда модель изменения, а также обновление модели всегда, когда вид меняется. Это потрясающе, потому что оно устраняет манипуляции DOM из списка вещей, о которых вам нужно беспокоиться.

https://angularjs.org/

Использование Угловая-х ngClick

var app = angular.module('myApp', []); 
 

 
app.controller('mainControl', function($scope) { 
 
    $scope.logged = false; 
 
    $scope.visiter = true; 
 
    $scope.signup = function() { 
 
    $scope.logged = !$scope.logged; 
 
    alert("ran the function"); 
 
    } 
 
})
<!DOCTYPE html> 
 
<html lang="en" ng-app='myApp'> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="MainViewController.js"></script> 
 
</head> 
 

 
<body ng-controller="mainControl"> 
 
    <div ng-show="logged"> 
 
    <button>1Sign Up</button> 
 
    <button>Log In</button> 
 
    </div> 
 
    <div ng-show="visiter"> 
 
    <button id="haha" ng-click="signup()">2Sign Up</button> <!-- use ngClick here! --> 
 
    <button>Log In</button> 
 
    </div> 
 
    <div ng-show="logged"> 
 
    hello 
 
    </div> 
 
</body> 
 

 
</html>

Смежные вопросы