이 질문은 오래되었지만 오랜 시간 동안 내 요구에 맞는이 문제에 대한 답을 얻으려고 애썼지 만 쉽게 찾지 못했습니다. 나는이 질문이 처음 제기 된 이후 각도가 기능을 추가했기 때문에 다음 해결책이 현재 받아 들여진 것보다 훨씬 낫다고 생각합니다.
짧은 대답, Module.value 메소드를 사용하면 데이터를 컨트롤러 생성자로 전달할 수 있습니다.
내 plunker를 참조 하십시오
모델 객체를 만든 다음 모듈의 컨트롤러와 연결하여 'model'이라는 이름으로 참조합니다.
HTML / JS
<html>
<head>
<script>
var model = {"id": 1, "name":"foo"};
$(document).ready(function(){
var module = angular.module('myApp', []);
module.value('model', model);
module.controller('MyController', ['model', MyController]);
angular.bootstrap(document, ['myApp']);
});
function confirmModelEdited() {
alert("model name: " + model.name + "\nmodel id: " + model.id);
}
</script>
</head>
<body >
<div ng-controller="MyController as controller">
id: {{controller.model.id}} <br>
name: <input ng-model="controller.model.name"/>{{controller.model.name}}
<br><button ng-click="controller.incrementId()">increment ID</button>
<br><button onclick="confirmModelEdited()">confirm model was edited</button>
</div>
</body>
</html>
내 컨트롤러의 생성자는 동일한 식별자 '모델'을 가진 매개 변수를 허용합니다.
제어 장치
function MyController (model) {
this.model = model;
}
MyController.prototype.incrementId = function() {
this.model.id = this.model.id + 1;
}
노트:
bootstrapping의 수동 초기화를 사용 하고 있으므로 모델을 각도로 보내기 전에 모델을 초기화 할 수 있습니다. 관련 데이터를 설정하고 필요할 때 필요할 때 앱의 각도 하위 집합 만 컴파일 할 수 있기 때문에 기존 코드와 훨씬 더 잘 어울립니다.
plunker에는 처음에 JavaScript로 정의되어 각도로 전달 된 모델 객체의 값을 경고하는 버튼이 추가되었습니다. 각도는 모델 객체를 복사하여 복사하는 것이 아니라 실제로 참조하는 것입니다.
이 줄에 :
module.controller('MyController', ['model', MyController]);
함수 인라인으로 선언하는 대신 MyController 객체를 Module.controller 함수에 전달하고 있습니다. 이것이 우리가 컨트롤러 객체를 훨씬 더 명확하게 정의 할 수 있다고 생각하지만 Angular 설명서는 인라인으로 처리하는 경향이 있으므로 설명이 필요하다고 생각했습니다.
"Controller as"구문을 사용하고 "$ scope"변수를 사용하는 대신 MyController의 "this"속성에 값을 할당합니다. 나는 이것이 $ scope를 사용하여 잘 작동한다고 생각합니다. 컨트롤러 할당은 다음과 같습니다.
module.controller('MyController', ['$scope', 'model', MyController]);
컨트롤러 생성자는 다음과 같은 서명을 갖습니다.
function MyController ($scope, model) {
어떤 이유로 든 원하는 경우이 모델을 두 번째 모듈의 값으로 연결 한 다음 기본 모듈에 대한 종속성으로 연결할 수 있습니다.
나는 그의 해결책이 현재 받아 들여진 것보다 훨씬 낫다고 믿는다.
- 컨트롤러에 전달 된 모델은 실제로 평가되는 문자열이 아닌 자바 스크립트 객체입니다. 이는 객체에 대한 참된 참조이며 변경 사항은이 모델 객체에 대한 다른 참조에 영향을줍니다.
- Angular는 허용 된 답변의 ng-init 사용이 오용 이며이 솔루션에서는 수행하지 않는다고 말합니다.
내가 본 다른 모든 예제에서 Angular가 작동하는 것처럼 보이는 것은 컨트롤러가 모델의 데이터를 정의하는 컨트롤러를 가지고 있습니다. 나에게 MVC. 이 솔루션을 사용하면 컨트롤러로 전달되는 완전히 별개의 모델 객체를 가질 수 있습니다. 또한 ng-include 지시문을 사용하면 모든 각도 HTML을 별도의 파일에 넣고 모델 뷰와 컨트롤러를 별도의 모듈로 분리 할 수 있습니다.