Hizmet değiştiğinde Angular JS yönergesini güncelleme

Question

this SO answer explaining how to render a recursive JSON structure using a directive numaralı telefonu takip etmeye çalışıyorum. Bununla birlikte, verilen yanıtın aksine, verilerim DOM yüklendiğinde ve Açısal olarak ilk defa çalıştırıldığında değil.

Bunun yerine, benim veri bir HTML giriş alanına alınan ve bir Açısal Servisi (kullanıcı formu gönderdiğinde) depolanır.

Servis'in veriler değiştirilene ben ne zaman güncel bir Eğik Yönergesi tutabilir nasıl

? cevaben

---

Güncelleme cevaplamak için yardımcı olmuştur mükemmel bir cevap vermiş, fakat (burada güncellenir) bir uygulama önlenmesi, ilgili sorunu ortaya @musically_ut

.

direktif$scope saklanan verilere erişmek Eğik {{expressions}} içeren HTML işler. Orijinal çözüm, hizmeti hizmetinin hazır olduğunda $watch olduğu için. Nasıl 'Yeni' veri kılan yönergesi önce $scopeeklenir emin olabiliriz?

mimarisi ve akışın bir bakıştır:

1. ControllerA ->
2. ControllerA kullanıcıdan girdi al - değişiklikler için>$watch -> verileri
3. ControllerB dönüştürmeye hizmet kullanın servis
4. Directive - cha için>$watchhizmetinde değişmelerin
5. ControllerB - direktifleri sorun adımlarla 5 ile 6 arasında olduğunu

kullanarak (hizmet itibaren)> Ekran dönüştürülmüş veriler ->$scope

Directive veri ekleyin. yönergesi, ControllerB, verileri $scope'a eklemeden önce {{expressions}} oluşturur. Bu işe yaramadı bile, çok karmaşık ve 'hacky' hissediyor. Aslında

, ben dönüştürülmüş veriler hizmette hazır olduğunda dinlemek için ControllerB içinde $watch kullanıyorum, gerilemeye. Bu bile biraz aşırı bir his verir (servisi zamanuyumsuz çağrılar yapmaz). yönergesini tanımlayan ve daha sonra veriler üzerinde $watch kurmak ise

Answer 1

Bu hizmeti enjekte edebilir.Yani sizin durumda:

.directive('tree', function ($compile, myService) { 
    return { 
     // ... 
     link: function (scope, element, attrs) { 
      scope.$watch(function() { 
       return myService.getData(); 
      }, 
      function (newVal) { 
       if (typeof newVal !== 'undefined') { 
        // ... 
       } 
      } 
     }); 
    } 
}); 

Bu değişim için verileri izlemek ve her seferinde kodunu veri değişikliklerini çalışacaktır.

---

Ancak veri $http yöntemleri doğrudan bir söz verir veya bir tane oluşturabilirsiniz (servisten bir söz dönmek olacağını bir kez, daha iyi bir yolu (daha verimli) bırakılmasının ardından değişmiyorsa $q hizmetini kullanarak) ve ardından verilerinizi veriye bir devam olarak ekleyin.

.directive('tree', function ($compile, myService) { 
    return { 
     // ... 
     link: function (scope, element, attrs) { 
      myService.getData().then(function (data) { 
       // ... 
      }, function (err) { 
       // Handle error 
      }); 
     } 
    } 
}); 

Answer 2

Bu nesneyi değiştirmeden Nesne'ye koymanızı sağlayan kısa bir işlev yazdım. Servisinizde kullanabilirsiniz. Bu şekilde saati kullanmana gerek yok. Angular'ın normal digest döngüsünü kullanabilirsiniz.

app.controller('dem',function($scope,me){ 
    $scope.user=me.user; // {name:'user name'} 
}) 

kontrolör seyretmek her zaman kalmadan otomatik chnage edilecektir:

Kontrolör assert testlerinin ile http://jsfiddle.net/y09kx7f7/1/ - JSFidde:

Demo: Örneğin, bu basit kontrolör & hizmet görmek kullanıcı adı değişti!

Servis

.factory('me',function($timeout){ 
    var obj={} 
    obj.user={name:'hello'} 
    $timeout(function(){ //Example of change the data 
     newUser={name:'israel'} 
     cloneInto(obj.user,newUser) 
    },1000) 
    return obj 
}) 

yazdım cloneInto fonksiyonu:

// The function it is like a=b, 
// but keeping the object in his original memory position. 
function cloneInto(a,b){ 
    var i 
    for (i in a){ 
     if(typeof a[i]!='object') //For supporting deep-copy 
      delete a[i] 
    } 
    for (i in b){ 
     if (typeof b[i]=='object'){ 
      if(!a[i]) a[i]={} 
      cloneInto(a[i],b[i]) 
     } 
     else{ 
      a[i]=b[i] 
     } 
    } 
}