AngularJS : hizmet özellikleri için bağlayıcı doğru yolu

SORU

4 NİSAN 2013, PERŞEMBE

AngularJS : hizmet özellikleri için bağlayıcı doğru yolu

AngularJS bir hizmetin özelliği bağlamak için nasıl en iyi uygulama arıyorum.

Birden fazla örneklerle AngularJS kullanarak oluşturulan bir hizmet özellikleri bağlamak için nasıl anlamaya çalışıyorum.

Hizmet özellikleri bağlamak için iki örnekler var; çalıştıkları her ikisi de aşağıda. İlk örnek, temel bağlantıları ve kullanılan $kapsam ikinci örnek kullanır.$hizmet özellikleri bağlamaya dikkat et

Bu örnek bir hizmet özellikleri bağlanırken tercih ya da tavsiye olacağını farkında değilim başka bir seçenek var mı?

Bu örnekler öncül hizmeti özellikleri “” ve “arayan” her 5 saniyede bir. lastUpdated güncelleştirilmiş olmasıdır Hizmet özellikleri güncelleştirilmiş bir görünüm bu değişiklikleri yansıtmak gerekir. Bu iki örnek, başarılı iş; eğer bunu yapmanın daha iyi bir yolu olup olmadığını merak ediyorum.

Temel Bağlama

Görünüm ve buraya koştum aşağıdaki kodu: http://plnkr.co/edit/d3c16z

<html>
<body ng-app="ServiceNotification" >

    <div ng-controller="TimerCtrl1" style="border-style:dotted"> 
        TimerCtrl1 <br/>
        Last Updated: {{timerData.lastUpdated}}<br/>
        Last Updated: {{timerData.calls}}<br/>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("ServiceNotification", []);

        function TimerCtrl1($scope, Timer) {
            $scope.timerData = Timer.data;
        };

        app.factory("Timer", function ($timeout) {
            var data = { lastUpdated: new Date(), calls: 0 };

            var updateTimer = function () {
                data.lastUpdated = new Date();
                data.calls  = 1;
                console.log("updateTimer: "   data.lastUpdated);

                $timeout(updateTimer, 5000);
            };
            updateTimer();

            return {
                data: data
            };
        });
    </script>
</body>
</html>

Hizmet özellikleri için bağlayıcı çözdüm başka yolu kullanın kapsam$.$denetleyicisi izle.

kapsam. $$izle

Görünüm ve buraya koştum aşağıdaki kodu: http://plnkr.co/edit/dSBlC9

<html>
<body ng-app="ServiceNotification">
    <div style="border-style:dotted" ng-controller="TimerCtrl1">
        TimerCtrl1<br/>
        Last Updated: {{lastUpdated}}<br/>
        Last Updated: {{calls}}<br/>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("ServiceNotification", []);

        function TimerCtrl1($scope, Timer) {
            $scope.$watch(function () { return Timer.data.lastUpdated; },
                function (value) {
                    console.log("In $watch - lastUpdated:"   value);
                    $scope.lastUpdated = value;
                }
            );

            $scope.$watch(function () { return Timer.data.calls; },
                function (value) {
                    console.log("In $watch - calls:"   value);
                    $scope.calls = value;
                }
            );
        };

        app.factory("Timer", function ($timeout) {
            var data = { lastUpdated: new Date(), calls: 0 };

            var updateTimer = function () {
                data.lastUpdated = new Date();
                data.calls  = 1;
                console.log("updateTimer: "   data.lastUpdated);

                $timeout(updateTimer, 5000);
            };
            updateTimer();

            return {
                data: data
            };
        });
    </script>
</body>
</html>

$Rootscope kullanabilirsiniz farkındayım.$Bu yayın hizmeti ve $root.$üzerinde denetleyici, ama diğer örnekler verdim oluşturulan kullan $yayın/$ilk yayın değildir tarafından yakalanan denetleyicisi, ama ek çağıran vardır yayınlanmaktadır tetikledi içinde denetleyicisi. Eğer $rootscope çözmek için bir yol biliyorsanız.$yayın, lütfen bir cevap sorun bulunur.

Ama bahsettiğim şeyi tekrar söylemek için daha erken, servis özellikleri bağlamak için nasıl en iyi yöntem öğrenmek istiyorum.

Güncelleme

Bu soru aslında ve Nisan 2013'te sorulan yanıtlandı. Mayıs 2014, Gil Birman doğru cevap olarak değiştirdim yeni bir cevap vermiştir. Çok az Yukarı oy aldı Gil beri, benim sorunum insanlar bu soruyu okumaktan çok daha fazla oy ile diğer cevaplar lehine onun cevabı göz ardı etsin. En iyi cevap ne bir karar vermeden önce, ben çok Gil Birman cevabı öneririz.

CEVAP

4 NİSAN 2013, PERŞEMBE

, $watch benim açımdan iyi bir antrenman olacak.

Aslında sizin örnek biraz basitleştirmek:

function TimerCtrl1($scope, Timer) {
  $scope.$watch( function () { return Timer.data; }, function (data) {
    $scope.lastUpdated = data.lastUpdated;
    $scope.calls = data.calls;
  }, true);
}

Bir bu eksikti.

Özellikleri aynı anda güncellendiği için sadece bir saate ihtiyacın var. Daha çok küçük, tek bir nesneden gelen bu yana, sadece Timer.data özelliği izlemek için değiştirdim. Son parametre $watch geçirilmeden başvuru aynı olduğunu sağlanması yerine derin eşitliği kontrol etmek için söyler.

Küçük bir bağlam sağlamak için, hizmet değeri doğrudan kapsamı üzerine yerleştirmek için bu yöntemi tercih ederim nedeni endişeleri doğru ayrılmasını sağlamaktır. Görünümü çalışabilmesi için hizmetler hakkında hiçbir şey bilmek gerekmez. Denetleyicinin işini her şeyi bir araya tutkal; işini hizmetleri verileri alıp gerekli ve sonra gereken neyse onu ile görünüm sağlamak için ne olursa olsun onları işlemek için. Ama onun işi sadece hizmet görmek için hemen yanına geçmek olduğunu sanmıyorum. Aksi takdirde, denetleyici bile orada ne işi var? AngularJS geliştiriciler "" şablonları (örneğin if tablolar). herhangi bir mantığı vardır değil seçtikleri zaman aynı mantık takip

Adil olmak gerekirse, muhtemelen birden çok bakış açısı var ve ileri diğer cevapları bekliyorum.

Bunu Paylaş: