AngularJS: Jak mogę przekazywać zmienne między kontrolerami?

Mam dwa kontrolery Angular:

function Ctrl1($scope) {
    $scope.prop1 = "First";
}

function Ctrl2($scope) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

Nie mogę użyć w Ctrl1środku, Ctrl2ponieważ jest niezdefiniowany. Jeśli jednak spróbuję przekazać to tak…

function Ctrl2($scope, Ctrl1) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

Dostaję błąd Czy ktoś wie jak to zrobić?

Robić

Ctrl2.prototype = new Ctrl1();

Również się nie udaje.

UWAGA: Te kontrolery nie są zagnieżdżone w sobie.

Jednym ze sposobów udostępniania zmiennych między wieloma kontrolerami jest utworzenie usługi i wstrzyknięcie jej do dowolnego kontrolera, w którym chcesz z niej korzystać.

Przykład prostej usługi:

angular.module('myApp', [])
    .service('sharedProperties', function () {
        var property = 'First';

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

Korzystanie z usługi w kontrolerze:

function Ctrl2($scope, sharedProperties) {
    $scope.prop2 = "Second";
    $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

Jest to bardzo ładnie opisane na tym blogu (lekcja 2 i dalsze).

Przekonałem się, że jeśli chcesz powiązać te właściwości na wielu kontrolerach, działa to lepiej, jeśli powiążesz z właściwością obiektu zamiast typu pierwotnego (wartość logiczna, łańcuch, liczba), aby zachować powiązane odniesienie.

Przykład: var property = { Property1: 'First' };zamiast var property = 'First';.

AKTUALIZACJA: Aby (miejmy nadzieję) wyjaśnić tutaj, jest skrzypce, która pokazuje przykład:

• Powiązanie ze statycznymi kopiami wspólnej wartości (w myController1)
  • Powiązanie z operacją podstawową (ciąg)
  • Powiązanie z właściwością obiektu (zapisaną w zmiennej zasięgu)
• Powiązanie z wartościami współdzielonymi, które aktualizują interfejs użytkownika podczas aktualizowania wartości (w myController2)
  • Powiązanie z funkcją zwracającą prymityw (ciąg)
  • Powiązanie z właściwością obiektu
  • Dwukierunkowe wiązanie z właściwością obiektu

Lubię ilustrować proste rzeczy prostymi przykładami :)

Oto bardzo prosty Serviceprzykład:

angular.module('toDo',[])

.service('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  this.dataObj = _dataObj;
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

A tutaj jsbin

A oto bardzo prosty Factoryprzykład:

angular.module('toDo',[])

.factory('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  return {
    dataObj: _dataObj
  };
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

A tutaj jsbin

Jeśli jest to zbyt proste, oto bardziej wyrafinowany przykład

Również zobaczyć odpowiedź tutaj najlepszych praktyk związanych komentarzach

--- Wiem, że ta odpowiedź nie dotyczy tego pytania, ale chcę, aby osoby, które przeczytały to pytanie i chciały obsługiwać usługi takie jak fabryki, aby uniknąć problemów z zrobieniem tego ----

W tym celu musisz skorzystać z Usługi lub Fabryki.

Usługi są NAJLEPSZĄ PRAKTYKĄ w zakresie udostępniania danych między nie zagnieżdżonymi kontrolerami.

Bardzo dobrą adnotacją na ten temat na temat udostępniania danych jest sposób deklarowania obiektów. Miałem pecha, ponieważ wpadłem w pułapkę AngularJS, zanim o tym przeczytałem, i byłem bardzo sfrustrowany. Pozwól, że pomogę ci uniknąć tego problemu.

Czytam z „ng-book: Cała książka o AngularJS”, że modele ng AngularJS, które są tworzone w kontrolerach jako same dane, są NIEPRAWIDŁOWE!

Element zakresu $ powinien zostać utworzony w następujący sposób:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // best practice, always use a model
  $scope.someModel = {
    someValue: 'hello computer'
  });

I nie tak:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // anti-pattern, bare value
  $scope.someBareValue = 'hello computer';
  };
});

Jest tak, ponieważ zaleca się (NAJLEPSZA PRAKTYKA), aby DOM (dokument HTML) zawierał wywołania jako

<div ng-model="someModel.someValue"></div>  //NOTICE THE DOT.

Jest to bardzo pomocne dla kontrolerów zagnieżdżonych, jeśli chcesz, aby kontroler podrzędny mógł zmienić obiekt z kontrolera nadrzędnego ....

Ale w twoim przypadku nie chcesz zagnieżdżonych zakresów, ale istnieje podobny aspekt pobierania obiektów z usług do kontrolerów.

Załóżmy, że masz swoją usługę „Fabryka”, aw przestrzeni powrotnej znajduje się obiekt A zawierający obiekt B zawierający obiekt C.

Jeśli ze swojego kontrolera chcesz dostać obiekt C do swojego zakresu, błędem jest powiedzieć:

$scope.neededObjectInController = Factory.objectA.objectB.objectC;

To nie zadziała ... Zamiast tego użyj tylko jednej kropki.

$scope.neededObjectInController = Factory.ObjectA;

Następnie w DOM można wywołać objectC z objectA. Jest to najlepsza praktyka związana z fabrykami, a co najważniejsze, pomoże uniknąć nieoczekiwanych i niemożliwych do złapania błędów.

Rozwiązanie bez tworzenia usługi przy użyciu $ rootScope:

Aby udostępnić właściwości między kontrolerami aplikacji, możesz użyć Angular $ rootScope. To kolejna opcja udostępniania danych, dzięki czemu ludzie o nich wiedzą.

Preferowanym sposobem udostępniania niektórych funkcji między kontrolerami są Usługi, do odczytu lub zmiany globalnej właściwości, której można użyć $ rootscope.

var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = true;
}]);

app.controller('Ctrl2', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = false;
}]);

Używanie $ rootScope w szablonie (Dostęp do właściwości za pomocą $ root):

<div ng-controller="Ctrl1">
    <div class="banner" ng-show="$root.showBanner"> </div>
</div>

Powyższa próbka działała jak urok. Właśnie zrobiłem modyfikację na wypadek, gdy muszę zarządzać wieloma wartościami. Mam nadzieję, że to pomoże!

app.service('sharedProperties', function () {

    var hashtable = {};

    return {
        setValue: function (key, value) {
            hashtable[key] = value;
        },
        getValue: function (key) {
            return hashtable[key];
        }
    }
});

Zwykle używam wartości, chętnie dyskutując, dlaczego to zły pomysł.

var myApp = angular.module('myApp', []);

myApp.value('sharedProperties', {}); //set to empty object - 

Następnie wprowadź wartość zgodnie z usługą.

Ustaw w ctrl1:

myApp.controller('ctrl1', function DemoController(sharedProperties) {
  sharedProperties.carModel = "Galaxy";
  sharedProperties.carMake = "Ford";
});

i dostęp z ctrl2:

myApp.controller('ctrl2', function DemoController(sharedProperties) {
  this.car = sharedProperties.carModel + sharedProperties.carMake; 

});

Poniższy przykład pokazuje, jak przekazywać zmienne między kontrolerami rodzeństwa i podejmować działania w przypadku zmiany wartości.

Przykład zastosowania: na pasku bocznym znajduje się filtr, który zmienia zawartość innego widoku.

angular.module('myApp', [])

  .factory('MyService', function() {

    // private
    var value = 0;

    // public
    return {
      
      getValue: function() {
        return value;
      },
      
      setValue: function(val) {
        value = val;
      }
      
    };
  })
  
  .controller('Ctrl1', function($scope, $rootScope, MyService) {

    $scope.update = function() {
      MyService.setValue($scope.value);
      $rootScope.$broadcast('increment-value-event');
    };
  })
  
  .controller('Ctrl2', function($scope, MyService) {

    $scope.value = MyService.getValue();

    $scope.$on('increment-value-event', function() {    
      $scope.value = MyService.getValue();
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  
  <h3>Controller 1 Scope</h3>
  <div ng-controller="Ctrl1">
    <input type="text" ng-model="value"/>
    <button ng-click="update()">Update</button>
  </div>
  
  <hr>
  
  <h3>Controller 2 Scope</h3>
  <div ng-controller="Ctrl2">
    Value: {{ value }}
  </div>  

</div>

Chciałbym przyczynić się do tego pytania, wskazując, że zalecanym sposobem udostępniania danych między administratorami, a nawet dyrektywami, jest korzystanie z usług (fabryk), jak już wskazano, ale także chciałbym zapewnić praktyczny przykład tego, jak to zrobić.

Oto działający plunker: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Po pierwsze, tworzyć swoją usługę , która będzie mieć swoje dane udostępnione :

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: '',
      value2: ''
    }
  };
});

Następnie po prostu wstrzyknij go do kontrolerów i pobierz współdzielone dane ze swojego zakresu:

app.controller('FirstCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('SecondCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

app.controller('MainCtrl', function($scope, SharedService) {
  $scope.model = SharedService.sharedObject;
});

Możesz to również zrobić dla swoich dyrektyw , działa to w ten sam sposób:

app.directive('myDirective',['SharedService', function(SharedService){
  return{
    restrict: 'E',
    link: function(scope){
      scope.model = SharedService.sharedObject;
    },
    template: '<div><input type="text" ng-model="model.value"/></div>'
  }
}]);

Mam nadzieję, że ta praktyczna i czysta odpowiedź może komuś pomóc.

Możesz to zrobić za pomocą usług lub fabryk. Są one zasadniczo takie same dla niektórych podstawowych różnic. To wyjaśnienie na thinkster.io uważam za najłatwiejsze do naśladowania. Prosty, konkretny i skuteczny.

Czy nie można również uczynić tej właściwości częścią nadrzędną dla zakresów?

$scope.$parent.property = somevalue;

Nie mówię, że to prawda, ale działa.

Ach, miej trochę tych nowych rzeczy jako kolejną alternatywę. Jest to magazyn lokalny i działa tam, gdzie działa kąt. Nie ma za co. (Ale naprawdę, dziękuję facetowi)

https://github.com/gsklee/ngStorage

Określ swoje ustawienia domyślne:

$scope.$storage = $localStorage.$default({
    prop1: 'First',
    prop2: 'Second'
});

Uzyskaj dostęp do wartości:

$scope.prop1 = $localStorage.prop1;
$scope.prop2 = $localStorage.prop2;

Zapisz wartości

$localStorage.prop1 = $scope.prop1;
$localStorage.prop2 = $scope.prop2;

Pamiętaj, aby wstrzyknąć ngStorage do swojej aplikacji i $ localStorage do kontrolera.

Można to zrobić na dwa sposoby

1) Skorzystaj z usługi get / set

2) $scope.$emit('key', {data: value}); //to set the value

 $rootScope.$on('key', function (event, data) {}); // to get the value

Drugie podejście:

angular.module('myApp', [])
  .controller('Ctrl1', ['$scope',
    function($scope) {

    $scope.prop1 = "First";

    $scope.clickFunction = function() {
      $scope.$broadcast('update_Ctrl2_controller', $scope.prop1);
    };
   }
])
.controller('Ctrl2', ['$scope',
    function($scope) {
      $scope.prop2 = "Second";

        $scope.$on("update_Ctrl2_controller", function(event, prop) {
        $scope.prop = prop;

        $scope.both = prop + $scope.prop2; 
    });
  }
])

HTML:

<div ng-controller="Ctrl2">
  <p>{{both}}</p>
</div>

<button ng-click="clickFunction()">Click</button>

Aby uzyskać więcej informacji, zobacz plunker:

http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview

Jeśli nie chcesz świadczyć usługi, możesz to zrobić w ten sposób.

var scope = angular.element("#another ctrl scope element id.").scope();
scope.plean_assign = some_value;

Oprócz $ rootScope i usług, istnieje czyste i łatwe alternatywne rozwiązanie do rozszerzenia kąta w celu dodania współdzielonych danych:

w kontrolerach:

angular.sharedProperties = angular.sharedProperties 
    || angular.extend(the-properties-objects);

Te właściwości należą do „kątowego” obiektu, oddzielonego od zakresów i mogą być współużytkowane w zakresach i usługach.

Zaletą tego jest to, że nie musisz wstrzykiwać obiektu: są one dostępne w dowolnym miejscu natychmiast po zdeklasowaniu!