angularjs'de dinamik yönergeler

Question

Kapsam güncellendiğinde yönerge öznitelikleri değişmez, yine de ilk değeri korurlar. Burada neyi özlüyorum?

HTML

<ul class="nav nav-pills nav-stacked" navlist> 
    <navelem href="#!/notworking/{{foo}}"></navelem> 
    <navelem href="#!/working">works great</navelem> 
</ul> 

<p>works: {{foo}}</p> 

JavaScript senin direktifi scope: {} tanımlayarak

angular.module('myApp.directives', []). 
directive('navlist', function() { 
    return { 
     scope: {}, 
     controller: function ($scope) { 
      var panes = $scope.panes = []; 

      this.select = function(pane) { 
       angular.forEach(panes, function(pane) { 
        pane.selected = false; 
       }); 
       pane.selected = true; 
      } 

      this.addPane = function(pane) { 
       if (panes.length == 0) 
        this.select(pane); 
       panes.push(pane); 
      } 

     } 
    } 
}). 
directive('navelem', function() { 
    return { 
     require: '^navlist', 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: { href: '@href' }, 
     link: function(scope, element, attrs, tabsCtrl) { 
      tabsCtrl.addPane(scope); 
      scope.select = tabsCtrl.select; 
     }, 
     template: 
      '<li ng-class="{active: selected}" ng-click="select(this)"><a href="{{href}}" ng-transclude></a></li>' 
    }; 
}); 

Answer 1

(ön sayfasında açısal sekmeler örnek dayanarak), bir isolated scope yaratıyor. Yani ana kapsam artık direktiften görünmez.

Üst kapsamı kullanmak istiyorsanız, paylaşılan kapsamı için (aynı yönergeler arasında) scope: true kodunu koyabilirsiniz ve yalnızca normal kapsam iç içe yerleştirme için kapsam bildirimini atlayabilirsiniz. Veya ebeveynin yalnızca $scope.foo numaralı telefonuna atıfta bulunmak istiyorsanız, çocuk yönergesinde yaptığınız gibi açık kapsam değişkenlerini tanımlayabilirsiniz.

Answer 2

direktif kapsamı miras üç tipi vardır:

1. No 'kapsamı: ...' ya da açık scope: false - Yeni kapsam oluşturulur. Direktif, ebeveyn ile aynı kapsamı kullanır. Bu basit ve kullanışlıdır, ancak yeniden kullanılabilir bileşenler oluşturuyorsanız, bu yönerge tavsiye edilmez, çünkü direktifin yalnızca ana kapsamın direktifin kullanması/erişmesi gereken belirli kapsam özelliklerine sahip olması durumunda kullanılabilir.
2. scope: true - üst öğenin normal prototipik kalıtımıyla aynı öğe üzerindeki tüm yönergeler tarafından paylaşılan yeni bir kapsam oluşturur. Yine, muhtemelen yeniden kullanılabilir bileşenler için en iyi seçim değildir, çünkü direktif muhtemelen ana kapsam özelliklerine erişememelidir - yanlışlıkla ebeveynteki bir şeyi değiştirebilir.
3. scope: { ... } - yeni "yalıtılmış" bir kapsam oluşturur - üst kapsamdan prototip olarak devralmaz. Bununla birlikte, nesne karması (yani, {...}), ana kapsamdan türetilen yerel yönerge kapsam özelliklerini tanımlamamıza izin verir - böylece hangi özelliklerin paylaşıldığını ve nasıl yapılabileceğini kontrol edebiliriz.
   1. Üst etki alanı özelliği ile yönerge kapsamı özelliği arasındaki güçlü 2 yollu bağlanma için '=' öğesini kullanın; kapsam özelliğindeki değişiklikler diğerini etkiler.
   2. Bir üst öğenin özellik değerini bir yönerge kapsam özelliğine bağlamak için '@' kullanın. Bu aslında 1 yönlü bir bağdır. Yalnızca ana kapsam değişiklikleri, yönerge kapsamını etkiler.
   3. Ana kapsam ifadelerine/işlevlerine bağlanmak için '&' öğesini kullanın. belirli sorun için

, kapsama özellikleriniz bağlama 2 yönlü olmasını istediğiniz nesne karma belirtmek gerekir., Bölüm burada direktifleri bakın (resimler dahil) direktifi kapsamları hakkında daha fazla bilgi için

: Mark Rajcok gibi What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

Answer 3

dedi - kapsamını: {} ebeveynden özelliklerini devralmaz yeni izole kapsam yaratacaktır Ancak, yine de bu mülklere $ parent özelliği kullanarak erişebiliyoruz.

Denetleyici:

app.controller('indexController', function($scope) { 
    $scope.test="Hello world!"; 
}); 

Yönergesi

app.directive("test", function() { 
    return{ 
     restrict: "A", 
     scope: {}, 
     controller: function($scope){ 
      console.log("directiv $scope.$parent.test: " + $scope.$parent.test); 
      console.log("directiv $scope.test: " + $scope.test); 
     } 
    }; 
}); 

çıkışı:

directiv $scope.$parent.test: Hello world! 
directiv $scope.test: undefined