Modyfikuj $ nieruchomość rootscope z różnymi kontrolerami

Question

w moim rootscope Mam właściwość visible który kontroluje widoczność div

app.run(function ($rootScope) { 
    $rootScope.visible = false; 
}); 

Przykład HTML:

<section ng-controller='oneCtrl'> 
    <button ng-click='toggle()'>toggle</button> 
    <div ng-show='visible'> 
     <button ng-click='toggle()'>&times;</button> 
    </div> 
</section> 

Kontroler:

var oneCtrl = function($scope){ 
    $scope.toggle = function() { 
     $scope.visible = !$scope.visible; 
    }; 
} 

Powyższa sekcja działa poprawnie, element jest wyświetlany lub ukrywany bez problemów. Teraz na tej samej stronie w innej sekcji próbuję zmienić zmienną visible, aby pokazać div, ale to nie działa.

<section ng-controller='otherCtrl'> 
    <button ng-click='showDiv()'>show</button> 
</section> 

Kontroler:

var otherCtrl = function($scope){ 
    $scope.showDiv = function() { 
     $scope.visible = true; 
    }; 
} 

Answer 1

W angularjs, $scope s prototypowo dziedziczą z ich zakresu nadrzędnego, aż do $rootScope. W JavaScript typy pierwotne są nadpisywane , gdy dziecko je zmienia. Dlatego ustawiając $scope.visible w jednym ze swoich kontrolerów, właściwość $rootScope nigdy nie została dotknięta, ale nowa właściwość visible została dodana do bieżącego zakresu.

W AngularJS wartości modelu w zakresie powinny zawsze mieć kropkę, czyli być obiektami zamiast elementów podstawowych.

Jednak można również rozwiązać sprawę poprzez wstrzyknięcie $rootScope:

var otherCtrl = function($scope, $rootScope){ 
    $scope.showDiv = function() { 
    $rootScope.visible = true; 
    }; 
} 

Answer 2

Jak jesteś zaznajomiony z pojęciem $ zakresu? Wydaje mi się, że na podstawie Twojego kodu utrzymujesz dwie osobne zmienne $ scope o nazwie "widoczne" w dwóch różnych zakresach. Czy każdy ze swoich kontrolerów ma swoje własne zakresy? Często tak się dzieje, w którym to przypadku edytujesz różne zmienne o nazwie "visible", gdy wykonasz $ scope.visible = true w różnych kontrolerach.

Jeśli widoczny jest naprawdę w rootcope, można zrobić $ rootScope.visible zamiast $ scope.visible, ale jest to trochę nieporządne.

Jedną opcją jest posiadanie tej sekcji kodu "otherCtrl" w dyrektywie (prawdopodobnie powinieneś to robić mimo to), a następnie dwukierunkowe powiązanie zakresu dyrektywy z zakresem rodzica, który można read up on here. W ten sposób zarówno dyrektywa, jak i kontroler stron używają tego samego obiektu zasięgu.

Aby lepiej odfiltrować swój zakres $, wypróbuj wtyczkę Chrome dla Angular, o nazwie Batarang. Pozwólmy ci przetrawdzić WSZYSTKIE twoje lunety i zobacz model przeznaczony dla ciebie, zamiast tylko mieć nadzieję, że szukasz odpowiedniego miejsca.