Câu hỏi này đã cũ nhưng tôi đã đấu tranh trong một thời gian dài để cố gắng có được câu trả lời cho vấn đề này có thể đáp ứng nhu cầu của tôi và không dễ dàng tìm thấy nó. Tôi tin rằng giải pháp sau đây của tôi tốt hơn nhiều so với giải pháp hiện đang được chấp nhận, có lẽ vì góc cạnh đã thêm chức năng vì câu hỏi này ban đầu được đặt ra.
Câu trả lời ngắn, sử dụng phương thức Module.value cho phép bạn truyền dữ liệu vào hàm tạo của bộ điều khiển.
Xem plunker của tôi ở đây
Tôi tạo một đối tượng mô hình, sau đó liên kết nó với bộ điều khiển của mô-đun, tham chiếu nó với tên '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>
Sau đó, hàm tạo trong bộ điều khiển của tôi chấp nhận một tham số có cùng mô hình 'mô hình' mà nó có thể truy cập.
Bộ điều khiển
function MyController (model) {
this.model = model;
}
MyController.prototype.incrementId = function() {
this.model.id = this.model.id + 1;
}
Ghi chú:
Tôi đang sử dụng khởi tạo thủ công bootstrapping , cho phép tôi khởi tạo mô hình của mình trước khi gửi nó tới góc. Điều này chơi độc đáo hơn nhiều với mã hiện có, vì bạn có thể chờ đợi để thiết lập dữ liệu liên quan của mình và chỉ biên dịch tập hợp con góc của ứng dụng theo yêu cầu khi bạn muốn.
Trong plunker tôi đã thêm một nút để cảnh báo các giá trị của đối tượng mô hình ban đầu được xác định trong javascript và được chuyển sang góc, chỉ để xác nhận rằng angular thực sự tham chiếu đến đối tượng mô hình, thay vì sao chép nó và làm việc với một bản sao.
Trên dòng này:
module.controller('MyController', ['model', MyController]);
Tôi chuyển đối tượng MyContoder vào hàm Module.contler, thay vì khai báo là một hàm nội tuyến. Tôi nghĩ rằng điều này cho phép chúng tôi xác định rõ hơn đối tượng điều khiển của mình, nhưng tài liệu Angular có xu hướng thực hiện nội tuyến nên tôi nghĩ rằng nó mang lại sự rõ ràng.
Tôi đang sử dụng cú pháp "trình điều khiển như" và gán các giá trị cho thuộc tính "this" của MyContoder, thay vì sử dụng biến "$ scope". Tôi tin rằng điều này cũng sẽ hoạt động tốt khi sử dụng $ scope, việc gán bộ điều khiển sau đó sẽ trông giống như thế này:
module.controller('MyController', ['$scope', 'model', MyController]);
và trình xây dựng bộ điều khiển sẽ có một chữ ký như thế này:
function MyController ($scope, model) {
Nếu vì bất kỳ lý do gì bạn muốn, bạn cũng có thể đính kèm mô hình này như một giá trị của mô-đun thứ hai, sau đó bạn đính kèm như một phụ thuộc vào mô-đun chính của mình.
Tôi tin rằng giải pháp của anh ấy tốt hơn nhiều so với giải pháp hiện đang được chấp nhận bởi vì
- Mô hình được truyền cho bộ điều khiển thực sự là một đối tượng javascript, không phải là một chuỗi được đánh giá. Nó là một tham chiếu thực sự cho đối tượng và thay đổi đối với nó ảnh hưởng đến các tham chiếu khác đến đối tượng mô hình này.
- Angular nói rằng việc sử dụng ng-init của câu trả lời được chấp nhận là sử dụng sai, điều mà giải pháp này không làm được.
Cách Angular dường như hoạt động trong hầu hết các ví dụ khác mà tôi đã thấy có bộ điều khiển xác định dữ liệu của mô hình, điều này không bao giờ có ý nghĩa với tôi, không có sự tách biệt giữa mô hình và bộ điều khiển, điều đó thực sự không giống MVC với tôi. Giải pháp này cho phép bạn thực sự có một đối tượng mô hình hoàn toàn riêng biệt mà bạn chuyển vào bộ điều khiển. Cũng cần lưu ý, nếu bạn sử dụng lệnh ng-include, bạn có thể đặt tất cả html góc của bạn vào một tệp riêng biệt, tách biệt hoàn toàn chế độ xem mô hình và bộ điều khiển của bạn thành các phần mô-đun riêng biệt.