2013-05-30 9 views
32

Mam potrzebę dziedziczenia zakresu od kontrolera nadrzędnego w dyrektywie. Niekoniecznie chcę opuścić zakres: fałsz. Niekoniecznie chcę też używać izolowanego zakresu, ponieważ wymaga to dużo pracy, aby uzyskać wartości, o które dbam, aby linki były prawidłowo (myślę, że wiele wartości w kontrolerze nadrzędnym).Czy możliwe jest zaktualizowanie zakresu macierzystego z dyrektywy kątowej o zakresie: prawda?

Czy ma sens stosowanie scope:true w mojej dyrektywie, jeśli chcę zaktualizować zakres nadrzędny?

<div ng-controller="MyCtrl"> 
     Hello, {{name}}! 
     <my-directive></my-directive> 
</div> 
var myApp = angular.module('myApp',[]); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.name = 'Dave'; 
} 


myApp.directive('myDirective', function() { 
    return { 
     scope: true, 
     restrict: 'EA', 
     link: function(scope, elem, attrs) { 
      scope.updateName = function(newName) { 
       console.log('newName is: ' + newName); 
       scope.name = newName; 
      } 
     }, 
     template: '<input ng-model="updatedName" placeholder="new name value"> <button ng-click="updateName(updatedName)">Update</button>' 
    } 
}) 

Proszę zapoznać się z fiddle

Odpowiedz

49

Chociaż @ user1737909 odwołał się już do pytania do przeczytania (What are the nuances of scope prototypal/prototypical inheritance in AngularJS?, co wyjaśni problem i zaleci różne sposoby jego rozwiązania), zwykle staramy się udzielić odpowiedzi na SO.

Tak więc powodem, dla którego twoje skrzypce nie działa, jest to, że gdy typ pierwotny (tj. Ciąg, liczba lub typ boolowski) jest zapisany na - np. scope.name = newName - "zapis" zawsze idzie do lokalny zasięg/obiekt. Innymi słowy, zakres podrzędny otrzymuje własną właściwość name, która cienie rodzica ma tę samą nazwę. Poprawka polega na użyciu obiektu, a nie typu pierwotnego, w zakresie nadrzędnym. Zakres podrzędny otrzyma wówczas odniesienie do tego obiektu. Wszelkie zapisy do właściwości obiektu (od rodzica lub dziecka) będą przekazywane do tego jednego obiektu. (Zakres dziecko nie dostanie swój własny obiekt.)

$scope.obj = {name: 'Dave'}; 

Następnie w dyrektywie:

scope.obj.name = newName; 

i HTML:

Hello, {{obj.name}}! 

fiddle

+0

rozumienie tylko tej części, a nie to, że zakresy działają bardziej ogólnie, to nie jest dobry pomysł. – Ven

+0

Tego właśnie szukałem. To jest ten kawałek, który skleił to (lub dużą jego część) razem. Dzięki, Mark, za szczegółową odpowiedź, jest naprawdę świetny. – binarygiant

+1

Przepraszam za wykopanie starego wątku, ale w materiale-kątowym można użyć na przykład dyrektywy mdSelect w następujący sposób: gpothier

15

Zakres dziedziczenia nie jest sens ustawiania wartości dziecka jest ustawienie wartości jego rodzica.

Zamiast wykonywać na osiach podrzędnych, dodaj metodę do zakresu nadrzędnego, który wykona to samo zadanie, ale w zakresie nadrzędnym, i wywoła go z zakresu podrzędnego, ponieważ potomek dziedziczy tę metodę.

+0

Właśnie z tym poszedłem, wydawało mi się czystsze, aby zapewnić metodę setera niż umożliwić bezpośredni dostęp do właściwości zakresu nadrzędnego. – Gruffy

6

w swoim funkcja łącza, którą napiszesz do rodzica scope (globalny zakres "$ scope"), jak to: scope. $ parent.name = newName;

Powiązane problemy