Dyrektywy dynamiczne w angularjs

Question

Atrybuty dyrektywy nie zmieniają się, gdy zakres jest aktualizowany, nadal zachowują wartość początkową. Czego tu mi brakuje?

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 (oparte na przykład na kartach kątowym przedniej stronie)

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

Definiując scope: {} w dyrektywie, to jest stworzenie isolated scope. Zasięg nadrzędny jest teraz niewidoczny z dyrektywy.

Jeśli chcesz odwołać zakres nadrzędny, możesz umieścić scope: true dla współużytkowanego zakresu (wśród tych samych dyrektyw) i pominąć deklarację zakresu dla zagnieżdżania w zwykłym zakresie. Lub jeśli chcesz po prostu odnieść $scope.foo elementu nadrzędnego, możesz zdefiniować zmienne o zakresie jawnym , tak jak w dyrektywie podrzędnej.

Answer 2

Istnieją trzy rodzaje dyrektywy zakresu dziedziczenia:

1. Nie „zakres: ...” lub jawne scope: false - nowy zakres nie jest tworzony. Dyrektywa korzysta z tego samego zakresu co rodzic. Jest to proste i wygodne, ale jeśli tworzysz komponenty wielokrotnego użytku, nie jest to zalecane, ponieważ dyrektywa będzie prawdopodobnie użyteczna tylko wtedy, gdy zakres nadrzędny ma określone właściwości zakresu, które dyrektywa wymaga użycia/dostępu.
2. scope: true - tworzy nowy zakres, wspólny dla wszystkich dyrektyw dotyczących tego samego elementu, z normalnym dziedziczeniem prototypowym zakresu nadrzędnego. Ponownie, prawdopodobnie nie jest to najlepszy wybór dla komponentów wielokrotnego użytku, ponieważ dyrektywa prawdopodobnie nie powinna mieć dostępu do właściwości zakresu nadrzędnego - może przypadkowo zmienić coś w obiekcie nadrzędnym.
3. - tworzy nowy "odosobniony" zakres - nie prototypowo dziedziczy po obszarze nadrzędnym. Jednak wartość skrótu obiektu (tj. {...}) pozwala nam definiować lokalne właściwości zakresu dyrektyw, które pochodzą z zakresu nadrzędnego - dzięki czemu możemy kontrolować, które właściwości są współużytkowane i w jaki sposób.
   1. Użyj '=', aby uzyskać silne dwukierunkowe powiązanie między rodzicielską właściwością zakresu i właściwością scope dyrektywy - zmiany właściwości obu zakresów wpływają na drugą.
   2. Użyj "@" do powiązania wartości atrybutu nadrzędnego z właściwością zakresu dyrektywy. Jest to w zasadzie wiązanie jednokierunkowe. Tylko zmiany zakresu rodzica wpływają na zakres dyrektywy.
   3. Użyj "&", aby powiązać z wyrażeniami/funkcjami zakresu nadrzędnego.

dla danego problemu, należy wskazać, w którym właściwości obiektu hash zakres chcesz mieć wiążący 2-drożny.

Więcej informacji na temat zakresów dyrektywy (w tym zdjęć), patrz punkt dyrektyw tutaj: What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

Answer 3

Jak powiedział Mark Rajcok - zakres: {} stworzy nowy odosobniony zakresu że nie dziedziczą właściwości z rodzicem jednak nadal możemy uzyskać dostęp do tych właściwości za pomocą $ parent property.

Kontroler:

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

dyrektywa

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); 
     } 
    }; 
}); 

wyjściowa:

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