Bu soru eski ama ihtiyaçlarım için işe yarayacak ve kolayca bulamayan bu soruna cevap vermeye çalışırken uzun süre mücadele ettim. Aşağıdaki çözümümün şu anda kabul edilen çözümden çok daha iyi olduğuna inanıyorum, çünkü belki de bu soru başlangıçta olduğu için açısal işlevsellik ekledi.
Module.value yöntemini kullanarak kısa yanıt, verileri bir denetleyici yapıcısına geçirmenizi sağlar.
Dalma makinemi burada gör
Bir model nesnesi oluşturuyorum, sonra onu modülün denetleyicisi ile ilişkilendiriyorum, 'model' adıyla referans alıyorum
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>
Denetleyicimdeki kurucu, daha sonra erişebileceği aynı tanımlayıcı 'model' ile bir parametreyi kabul eder.
kontrolör
function MyController (model) {
this.model = model;
}
MyController.prototype.incrementId = function() {
this.model.id = this.model.id + 1;
}
Notlar:
Açılıma göndermeden önce modelimi başlatmamı sağlayan bootstrapping'in manuel olarak başlatılmasını kullanıyorum . İlgili verilerinizi ayarlamak ve yalnızca istediğiniz zaman uygulamanızın açısal alt kümesini derlemek için bekleyebileceğinizden, bu mevcut kodla çok daha güzel oynar.
Dalma makinesinde, başlangıçta javascript'te tanımlanan ve açısal olarak geçen model nesnesinin değerlerini uyarmak için bir düğme ekledim, sadece açısalın kopyalamak ve bir kopya ile çalışmak yerine model nesnesine gerçekten başvurduğunu doğrulamak için.
Bu hatta:
module.controller('MyController', ['model', MyController]);
MyController nesnesini Module.controller işlevine geçerek yerine satır içi işlev olarak bildiriyorum. Bu bizim denetleyici nesnemizi çok daha net bir şekilde tanımlamamıza izin verdiğini düşünüyorum, ancak Açısal belgeler bunu satır içi yapmaya eğilimlidir, bu yüzden açıklık taşıdığını düşündüm.
"Denetleyici olarak" sözdizimi kullanarak ve "$ scope" değişkeni yerine, MyController "bu" özelliğine değerler atama. Ben de $ kapsamı kullanarak iyi çalışır inanıyorum, denetleyici atama sonra böyle bir şey olurdu:
module.controller('MyController', ['$scope', 'model', MyController]);
ve denetleyici kurucusunun şöyle bir imzası olurdu:
function MyController ($scope, model) {
İstediğiniz herhangi bir nedenle, bu modeli ikinci bir modülün değeri olarak, daha sonra birincil modülünüze bağımlı olarak iliştirebilirsiniz.
Çözümünün şu anda kabul edilenden çok daha iyi olduğuna inanıyorum çünkü
- Denetleyiciye aktarılan model aslında değerlendirilen bir dize değil, bir javascript nesnesidir. Nesneye gerçek bir referanstır ve nesnede yapılan değişiklikler bu model nesnesine yapılan diğer referansları etkiler.
- Angular, kabul edilen cevabın ng-init kullanımının bu çözümün yapmadığı bir yanlış kullanım olduğunu söylüyor.
Angular'ın gördüğüm diğer örneklerin çoğunda nasıl çalıştığı, modelin verilerini tanımlayan, bana hiç mantıklı gelmeyen denetleyiciye sahip, model ve denetleyici arasında hiçbir ayrım görünmüyor. MVC bana. Bu çözüm, denetleyiciye ilettiğiniz tamamen ayrı bir model nesnesine sahip olmanızı sağlar. Ayrıca, ng-include direktifini kullanırsanız, tüm açısal html'nizi ayrı bir dosyaya koyabilir, model görünümünüzü ve denetleyicinizi ayrı modüler parçalara tamamen ayırabilirsiniz.