2016-03-29 19 views
0

Bugünlerde MVC patternAngularJS kullanarak oynuyorum bir Görünüm Çoklu Kontrolörler. Denetleyici, modeller ve görünümler arasında çok karıştım. Şimdiye kadar ne anlamış MVC deseni biz üç aşağıdakilere sahip, yani:angularjs:

1) Model: Model mantığı veya veritabanı veya veri kendisi herhangi biridir. Anguarljs'da, modeller fabrikalar veya hizmetler kullanılarak oluşturulur.

2) Görüntüleme: Verilerimiz, verilerin nasıl temsil edildiğini veya kullanıcıya gösterildiğini gösterir. Bu, modelimizi kullanıcıya gösterir.

3) Denetleyici: Kontrolör kontrol eden bir şeydir. Coding Horror'da yazıldığı gibi, denetleyici uygulamanın beyinleridir. Denetleyici, kullanıcının girişinin ne olduğuna, modelin bu girdinin sonucu olarak nasıl değişmesi gerektiğine ve sonuçta hangi görünümün kullanılmasına karar verir.

Yani kumandanın tanımı bakarak ben kontrolör patron olduğunu söyleyebiliriz. Her ne olursa olsun sorumlu olacak. Benim uygulamada, proje, şekil, not vb gibi modellerinin bir çift var. Ne yapıyorum her model için factories oluşturdum. Örneğin. ProjectFactory, ShapeFactory, NoteFactory. Ve ben, şekil ve not proje ile ilgili malzeme kontrol etmek NoteController, bunların her birinin yani ProjectController, ShapeController için controller oluşturduk. Doğru olup olmadığından emin değilim. Benim uygulamada

ben de görüşleri bir çift yani map-view.html, project-view.html var. Her görünüm için denetleyici MapViewController, ProjectViewController. Proje görünümümün projelere ve notlara ihtiyacı var. Proje-view.html içinde ProjectViewController, ProjectController, NoteController kullanmam gerekiyor. Bunu nasıl yapabilirim bilmiyorum.

<div ng-controller="ProjectController"> 
    <div ng-controller="NoteController"> 
     <div ng-controller="ProjectController"> 
     Project view goes here 
     </div> 
    </div> 
</div> 

Ama ben bu yüzden bu merdiveni oluşturamıyor modelin çok sayıda olması ve aynı zamanda ebeveyn kapsamını erişen edeceğiz yarın neden bunu yapmak için iyi bir yol değil: Böyle kumandanın bir merdiven oluşturabilir Sırtta bir acı olacak. Antoher apporach ben ProjectService, ShapeService ve NoteService gibi hizmetleri oluşturmak ve ProjectViewController bu hizmetleri kullanabilirsiniz olmasıdır

$socpe.$parent.$parent.$parent.data='Set data.'

: gibi olacak. Ancak bu, bana services tarafından verilen tüm malzemelerin tarafından ele alınması gerektiğinden ve bu kontrolörlerin birden fazla yerde/görünümde kullanılması gerektiğinden, karışıklık yaratıyor. Doğru mu yoksa denetleyiciler mi demek istediğim angularjs denetleyicileri MVC desen denetleyicisinden farklı mı? Bütün bu kavramları berbat ettim.

+1

ikincisi Bence doğru yaklaşımdır.Bir görünüm, bir denetleyici ve ihtiyacınız olan hizmetleri enjekte edin. Bu her şeyi güzel ve temiz tutar. – shammelburg

+0

İkincisi, bu http://stackoverflow.com/questions/36257080/angularjs-sharing-data-across-controllers adresine yönlendirir –

+0

Verilerinize, JSON dosyasına veya HTTP'ye nasıl eriştiğinize bağlı olarak, aramada yanlış bir şey yoktur. görünüm değiştiğinde veriler. Veriler aynıysa ve asla değişmezse JSON kullanın, aksi halde HTTP'yi kullanın. – shammelburg

cevap

1

deneyin kullanarak direktifler yerine,

<div ProjectDirective> 
    <div NoteDirective> 
     <div> 

     </div> 
    </div> 
</div> 

Bu şekilde, her direktif için mvc sağlamak için bir şans ve bu yönerge başına izole olabilir. Düzenlemek çok daha kolay.

Örnek direktifi fonksiyonu,

 // Code goes here 
var app = angular.module('demoApp', []); 


(function(angular) { 
    'use strict'; 

    var projectDirective = function() { 
    function controller() { 
     this.hello = 'I am from project directive.'; 
     console.log('Not sure why this is not getting called'); 
    } 

    function link() { 
    } 

    return { 
     restrict: 'EA', 
     link: link, 
     controller: controller, 
     template: '<div>{{ctrl.hello}}<span ng-transclude></span></div>', 
     //templateUrl: 'xxx.html', 
     controllerAs: 'ctrl', 
     bindToController: true, 
     transclude: true, 
     scope: {} 
    }; 
    }; 
    app.directive('projectDirective', [projectDirective]); 
})(angular); 

(function(angular) { 

    app.controller('ViewController', ['$scope', function($scope) { 
    $scope.greeting = "I am from ViewController"; 
    }]); 
}(angular)); 
+0

Sizi rahatsız ettiğim için üzgünüm. Ben bunları öğreniyorum. ProjectViewController'da projectDirective kontrolöründe tanımlanmış olan metotlara nasıl ulaşacağım. Bir plunkr sağlayabilir misin? –

+0

açısal dokümanları okumalısınız. Direktif yöntemlerine temel olarak direktif şablonunuzun veya yönerge etiketinizin başlangıç ​​ve bitiş etiketlerine erişebilirsiniz. –

+0

tamam. teşekkürler .. :) –