AngularJS - 모델 변수를 jQuery에서 사용할 수있게 만드시겠습니까?

Question

저는 AngularJS로 시작했고 Angular 컨트롤러 외부에서 범위 변수를 쉽게 참조 (바인드?)하는 방법을 알아 내려고했습니다.

간단한 코드 :

<div ng-controller="Ctrl"> 
    <label>Name:</label> 
    <input type="text" ng-model="yourNameInput" placeholder="Enter a name here"> 
    <input type="button" onClick="console.log(inputName);"> 
    <hr> 
    <h1 ng-bind-template="Hello, {{yourNameInput}}"></h1> 
</div> 

가 어떻게 {{yourNameInput}} 내 응용 프로그램의 나머지 부분에 사용할 수 VAR inputName에 바인딩 것인가? 다음

$scope.change = function() { inputName = $scope.yourNameInput; } 

과 :

<... ng-change = "change()"> 

아무것도 더 우아한 내가 그렇게 관리 못생긴 방법이있다?

Answer 1

컨트롤러에 $window을 삽입하여 범위에서 사용할 수있게 만들 수 있습니다. example을 참조하십시오.

function Ctrl($scope, $window) { 
    $scope.window = $window; 
}​ 

...

<input type="text" ng-model="yourNameInput" placeholder="Enter a name here" ng-change="window.yourName = yourNameInput"> 

폭 넓은 사용을 위해 당신은 $rootScope에 사용할 수 있도록 할 수 있습니다. 다른 example을 참조하십시오.

angular.module('myApp', []) 
    .run(function($rootScope, $window){ 
     $rootScope.window = $window; 
    }); 

또한 Call Angular JS from legacy code을 볼 수 있습니다.

<input type="button" onClick="console.log('{{yourNameInput}}');" value="Log"> 

이 example를 참조 CONSOLE.LOG에 대한

는()를 사용할 수 있습니다. 당신이 AngularJS와 응용 프로그램을 디버깅하려면

당신은 그럼 난 당신이 당신의 외부 세계가 자동으로 업데이트 것이라고 기대하지 않을 것이다 생각 AngularJS Batarang (textual description and source code)

Answer 2

를 사용할 수있을 때 모델 변경됩니다. 오히려, 모델을 끌어 당길 수 있습니다.

모델 데이터를 전역 변수와 동기화하는 아이디어가 마음에 들지 않습니다. 내가 너라면, 내가 할거야

console.log($("[ng-controller=Ctrl]").scope().yourNameInput); 

외부 세계의 모든 장소는 모델에 액세스해야합니다.