2014-11-12 12 views
6

Sayfa başlığını dinamik olarak güncellemeye çalışıyorum.

<title page-title></title> 

to the documentation, I am supposed to be able to access my custom data property göre:: Sayfa BAŞ bölümünde

$stateProvider.state('login', { 
     url: '/login', 
     templateUrl: '/templates/views/login.html', 
     controller: 'AuthCtrl', 
     data: {title: 'Log in'} 
} 

:

app.directive("pageTitle", function ($state) { 
    return { 
     restrict: 'A', 
     template: "{{title}}", 
     scope: {}, 
     link: function (scope, elem, attr) { 
      scope.title=$state.current.data.title; //wrap this in $watch 
      console.log('page state',$state.current.data.title); 
     } 

    } 
}); 

Ama bu undefined döndürür

bir devlet şekilde tanımlanan düşünün. Herhangi bir fikir? Teşekkürler!

cevap

7

Değişken, sayfa için kullanılabilir, ancak yönergelerinizde, isolated scope'u oluşturdunuz. Bir yönerge üzerinde scope: {} seçeneğini her kullandığınızda, yalnızca yönerge ile sınırlı bir kapsam oluşturur.

Bu sorunu çözmenize yardımcı olacak iki seçeneğiniz vardır.

  1. Sen üst sayfada var scope için direktif tam erişim sağlayacak olan scope:{} seçeneği olmadan yönergesini oluşturabilir. Buradaki dezavantaj, direktifin kapsam başına tek bir örneğe sınırlandırılmasıdır.
  2. bir kapsam seçeneği bağlayıcı oluşturun ve yönergeye HTML değişken geçirmek

Yönergesi: scope: {title: '=title'}

HTML: <title><page-title title="{{$state.current.data.title}}"></page-title></title>

+0

Ah, harika bir açıklama. Teşekkür ederim. – metalaureate

+0

FYI Bunu bir kapsamda sarmak zorunda kaldım. Güncellenmesi için $ watch. – metalaureate

İlgili konular