2016-11-01 7 views
1

나는이 분야에 새로운 경험이 있으며 오랫동안 시도해 보았습니다. 내 간단한 버전을 여기에서 볼 수 있습니다 : https://plnkr.co/edit/YeahrG28bT2izX8gMKor?p=preview왜 내 onclick가 작동하지 않습니까?

왜 내 onclick이 작동하지 않는지 말해 줄 수 있습니까? 내 버튼은 2signUp입니다. 고마워요!

JS :

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 ("하하")를 사용하고 있습니다. 'document.getElementById'를 사용해야합니다. – Rohit

+1

ng-click 기능을 사용하지 않는 이유는 무엇입니까? – Falk

+1

@Falk를 참고하십시오. 예외가 있지만 일반적으로 JQuery와 Angular를 섞어서는 안됩니다. – Jaco

답변

4

어떤 document.getElementById() 재즈를 사용하지 않는, 클릭 이벤트를 처리하는 각도 방법을 사용합니다.

는 각 핸들을하도록해야 왜 그것을

데이터 바인딩

데이터 결합 뷰를 업데이트의 자동 방법입니다 때마다 모델이 변경뿐만 아니라 모델마다를 업데이트 보기가 변경됩니다. 이것은 당신이 걱정해야 할 것들의 목록에서 DOM 조작을 제거하기 때문에 대단합니다.

https://angularjs.org/

를 사용하여 각도의 [0]`그러나`haha`은 ID입니다 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>

관련 문제