2017-10-31 4 views
0

컨트롤러에 hello world 함수를 실행하고 싶습니다 (버튼 클릭으로 html에서 호출).하지만 이것을 호출 할 수 없으며 오류를 표시하지 않는 이유가 무엇인지 알 수 없습니다.Angular js에서 html로 함수 컨트롤러를 호출하는 방법은 무엇입니까?

html 코드 :

<html ng-app="app"> 


    <div ng-controller="indexController"> 
     <button type="button" ng-click="helloWorld()">action</button> 
    </div> 

컨트롤러 JS :

(function() { 
'use stritct'; 

angular 
.module('app',[]) 
.controller('indexController', indexController); 

indexController.inject = ['$rootScope','$scope']; 

function indexController($rootScope,$scope) { 
    var vm = this; 

    vm.helloWorld = helloWorld; 

    function helloWorld() { 
     console.log('hello'); 
    } 
} 
})(); 
+0

당신의 onclick =이 "Helloworld()"를 시도 않았다 대신 HTML 코드에서 =이 "Helloworld를()에"NG 클릭? – AlexWoe89

+0

지시는 ng 클릭이 전형적인 각도이며, –

답변

0

컨트롤러에서 템플릿의 함수 나 데이터에 액세스하려면 $scope 객체에서 함수 또는 값을 정의해야합니다. 템플릿에서 사용할 수있는 $scope 개체에서 정의한 모든 것. 대신 vm.helloWorld = helloWorld;

당신은 컨트롤러에서 데이터에 액세스하고 템플릿에 표시 할 수 있습니다, 같은 방식으로

$scope.helloWorld = helloWorld;을 시도합니다.

angular.module('app',[]) 
 
    .controller('indexController', indexController); 
 

 
indexController.$inject = ['$rootScope','$scope']; 
 

 
function indexController($rootScope,$scope) { 
 
    $scope.helloWorld = function() { 
 
     console.log('hello'); 
 
    } 
 
    
 
    $scope.message = 'From the controller!'; 
 
}
<html ng-app="app"> 
 
    <body> 
 
    <div ng-controller="indexController"> 
 
     <button type="button" ng-click="helloWorld()">action</button> 
 
     
 
     <p>{{ message }}</p> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    </body> 
 
</html>

+0

** Controller를 Class ** 문법으로 사용하면 그의 코드는 괜찮습니다. 컨트롤러를 올바르게 선언하지 않은 경우 범위를 'this'객체로 참조 할 수 있습니다. –

+0

@AlekseySolovey 아아, 그 문법을 알고 있기 때문에 설명을 해줘서 고마워. –

3

ng-click="helloWorld()$scope.helloWorld() 함수를 호출하려고합니다, 즉 여기에 정의되지 않습니다.

helloWorld 함수가 각도 범위가 아닌 컨트롤러 개체에 연결되어 있습니다.

컨트롤러의 별칭을 ng-controller="indexController as index"과 같이 설정해야하며 helloWorld 함수를 ng-click="index.helloWorld()"과 같이 호출 할 수 있습니다.

+0

감사해야합니다! 재치 콘트롤러가 성공! –