브라우저 콘솔에서 앵귤러 함수를 호출하다

브라우저 콘솔에서 앵귤러 함수를 호출하다

Angular에게 전화할 수 있나요?콘솔의 JS 컨트롤러 기능(Chrome Developer Tools 콘솔)

예.

app.controller('AddCtrl', ['$scope', function ($scope) {



    $scope.save = function(){
        // do stuff here - call it from console
    };

}]);

네, 그냥 사용하시면 됩니다.angular.element컨트롤러 범위 내의 요소를 가져오려면 다음 절차를 따릅니다.

angular.element("yourElement").scope().save();

브라우저 개발자 콘솔을 엽니다.컨트롤러가 주입되는 요소를 검사합니다.다음을 수행합니다.

angular.element($0).scope().save()

$0은 개발자 콘솔 요소 패널에서 현재 선택하고 있는 요소입니다.

jquery를 사용하지 않고 angular만 사용한다면 다음과 같은 작업을 할 수 있습니다.angular.element(document.getElementById('yourElement')).scope().save();

만약 당신이 앵글과 jquery를 모두 사용한다면, 당신은 다음을 할 수 있습니다.angular.element($('#yourElement')).scope().save();요소의 id 속성이 다음과 같이 설정되어 있다고 가정합니다.<div id=yourElement></div>

매우 중요하지만 콘솔에서 호출하는 함수가 변경 내용을 보기에 표시할 수 있는 작업을 수행할 경우 이러한 변경 내용을 전달해야 합니다.$apply()이것처럼.

var scope = angular.element($('#story')).scope();
scope.$apply(function(){
  scope.showNextScene();
});

Angular라는 개발자를 위한 Chrome Extension을 로드할 수 있습니다.JS바타랑.

Angular를 추가합니다.개발자 콘솔의 JS 탭.

$scope가 있는 경우 페이지에서 요소를 선택하면 "Elements" 오른쪽 창의 "$scope" 탭 아래에 표시됩니다.

1. Chrome 인스펙터에서 실행할 컨트롤러와 관련된 요소를 클릭합니다.
2. angular.element(0달러).scope().nameYourFunction을 입력합니다.InScope();
3. 실행

언급URL : https://stackoverflow.com/questions/22795628/calling-angular-controller-function-from-browser-console