기존 값으로 AngularJS 모델 채우기

Question

기존 응용 프로그램에 약간의 각도를 추가하고 있습니다. 나는 아약스에 의해 제출 된 모든 양식을 관리하기 위해 컨트롤러를 활용하기 시작했다. 양식은 현재 jQuery의 $.load() 기능을 사용하여 페이지로 가져오고 양식 요소에는 이미 값이 있습니다.

이 값을 사용하려면 $ scope에 할당 한 모델을 사용하고 싶습니다. 예를 들면 다음과 같습니다 NG 모델이 비어 있기 때문에

function UserCtrl($scope) { 
    $scope.update = function(user) { 
    // update the user 
    }; 
} 

은 그대로, 내 폼 입력 요소가 비어 있습니다 : 내 main.js에서

<form> 
    <input type="text" ng-model="user.firstName" value="Gregg" /> 
    <input type="text" ng-model="user.lastName" value="Bolinger" /> 
    <button ng-click="update(user)">Save</button> 
</form> 

그리고 내가 다음과 같은 일을 할 것이다 파일. 양식의 기존 값으로 내 ng 모델을 초기화하는 방법이 있습니까?

BTW, 나는 내 것과 같은 this SO Question을 읽었지 만 일부 창 범위가 지정된 전역 변수보다 더 나은 대답을 기대합니다.

Answer 1

큰 문제는 현재 설정에서 jQuery가 각도 세계 밖에서 작동한다는 것입니다. 각도 스코프에 대한 개념이 없거나 조금 외견이 많지 않고 앵귤러 작동 방식에 어긋나지 않으면 서 실제로 액세스 할 수있는 방법은 없습니다. 그러나 원하는 경우이 작업을 수행 할 수 있습니다.

jQuery에서 데이터를로드 한 후 양식 값을 설정하지 않고 각도 모델에서 값을 직접 설정할 수 있습니다. 예를 들어 당신이 컨트롤러 내에서 다음

<div class="wrapper" ng-controller="UserCtrl"> 
    <form> 
     ... inputs as in your post ... 
    </form> 
</div> 

같은 페이지에 뭔가가 있다면, 당신은 실제로 어느 시점에 jQuery를의 각도 범위를 얻을 수있어 그런

$scope.user = { 
    firstName: "", 
    lastName: "" 
} 

을 넣어. 이 예에서, 당신은 단순히 당신이하고있는 것처럼

$(".wrapper").scope(); 

그래서, 당신의 jQuery를, 당신은 당신의 데이터를 가져올 수있다 할 것이고, 그럼 그냥 범위 내에서 값을 할당합니다. 예를 들어,

var user = ... load data with jquery here ...; 
var scope = $(".wrapper").scope(); 
var $user = scope.user; 
scope.$apply(function() { 
    $user.firstName = user.firstName; 
    $user.lastName = user.lastName; 
}); 

과 같은 것을 할 수 있습니다. 이론적으로 이것은 당신이 한 일을해야합니다.

그러나 데이터로드를 각도에 맞게 이동하는 것이 좋습니다. 이렇게하면 훨씬 쉽고 혼동을 덜 수 있습니다. 각도는 JQuery와, 좋은 인뿐만 아니라처럼 그냥 쉽게 데이터 로딩을하고 당신이 ngResource을 (개인적으로 내가 좋아하는)를 사용한다면 당신은 단순히

User.get({ id: user_id_here }) 

을 수행하여 사용자를 가져올 수 그리고 그것 뿐이다. 그런 다음 컨트롤러에서, 당신은 단지

$scope.user = User.get({ id: user_id_here }) 

이있을 것이다 그리고 그 형태는 이동 :)

을 설정됩니다하지만 내가 말하는대로, 당신은 당신이

를 원하는 경우는 현재의 구조로 인라인 실행할 수 있습니다