Передача даних між контролерами в Angular JS?

У мене є базовий контролер, який відображає мою продукцію,

App.controller('ProductCtrl',function($scope,$productFactory){
     $productFactory.get().success(function(data){
           $scope.products = data;
     });
});

На мою думку, я відображаю цю продукцію в списку

<ul>
    <li ng-repeat="product as products">
        {{product.name}}
    </li>
</ul

Те, що я намагаюся зробити, це коли хтось натискає на назву продукту, у мене є інший вигляд кошика, на якому додається цей товар.

 <ul class="cart">
      <li>
          //click one added here
      </li>
      <li>
          //click two added here
      </li>
 </ul>

Тому я сумніваюсь у тому, як передати ці натиснуті продукти з першого контролера на другий? Я припускав, що візок теж повинен бути контролером.

Я обробляю події клацання за допомогою директиви. Крім того, я відчуваю, що я повинен використовувати сервіс для досягнення вище функціональності просто не можу зрозуміти, як? оскільки кошик буде заздалегідь визначений, кількість доданих продуктів може становити 5/10 залежно від того, на якій сторінці користувач. Тож я хотів би зберегти це загальне.

Оновлення:

Я створив послугу для трансляції і в другому контролері я її отримую. Тепер запит, як я можу оновити dom? Оскільки мій список для викидання товару є досить жорстким кодом.

З опису, схоже, вам слід скористатися послугою. Перегляньте http://egghead.io/lessons/angularjs-sharing-data-bet between-controllers та службу AngularJS, що передає дані між контролерами, щоб переглянути деякі приклади.

Ви можете визначити свою послугу продуктів (як фабрику) як таку:

app.factory('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

Залежність вводить послугу обом контролерам.

У вашому ProductControllerвизначте деяку дію, яка додає вибраний об'єкт до масиву:

app.controller('ProductController', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

У своєму розпорядженні CartControllerотримуйте товари від послуги:

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();
});

як передати ці натиснуті продукти з першого контролера на другий?

Після натискання ви можете викликати метод, який викликає трансляцію :

$rootScope.$broadcast('SOME_TAG', 'your value');

а другий контролер буде слухати цей тег, як:

$scope.$on('SOME_TAG', function(response) {
      // ....
})

Оскільки ми не можемо ввести $ range у сервіси, то немає нічого подібного до області $ singleton.

Але ми можемо зробити ін’єкцію $rootScope. Отже, якщо ви зберігаєте цінність у Сервісі, ви можете запускатись $rootScope.$broadcast('SOME_TAG', 'your value');у тій службі. (Дивіться @Charx опис послуг)

app.service('productService',  function($rootScope) {/*....*/}

Перевірте хорошу статтю про $ трансляцію , $ emit

Рішення без створення сервісу, використовуючи $ rootScope:

Для обміну властивостями між контролерами додатків ви можете використовувати Angular $ rootScope. Це ще один варіант обміну даними, розміщуючи їх так, щоб люди знали про них.

Кращим способом обміну деякими функціональними можливостями між контролерами є Послуги, для читання або зміни глобальної властивості можна використовувати $ rootcope.

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

Використання $ rootScope у шаблоні (Доступ до властивостей з $ root):

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

Зробити це можна двома методами.

1. Використовуючи $rootscope, але я не рекомендую цього. Це $rootScopeнайвища сфера застосування. У додатку може бути лише той, $rootScopeякий буде поділятися між усіма компонентами програми. Отже, вона діє як глобальна змінна.

2. Використання послуг. Це можна зробити, поділившись послугою між двома контролерами. Код послуги може виглядати так:

   app.service('shareDataService', function() {
       var myList = [];
   
       var addList = function(newObj) {
           myList.push(newObj);
       }
   
       var getList = function(){
           return myList;
       }
   
       return {
           addList: addList,
           getList: getList
       };
   });

   Ви можете побачити мою загадку тут .

Ще простішим способом обміну даними між контролерами є використання вкладених структур даних. Замість, наприклад

$scope.customer = {};

ми можемо використовувати

$scope.data = { customer: {} };

dataМайно буде успадковуватися від батьківської області , тому ми можемо переписати свої поля, зберігаючи доступ з інших контролерів.

angular.module('testAppControllers', [])
    .controller('ctrlOne', function ($scope) {
        $scope.$broadcast('test');
    })
    .controller('ctrlTwo', function ($scope) {
        $scope.$on('test', function() {
        });
    });

ми можемо зберігати дані в сеансі і можемо використовувати їх будь-де у програмі.

$window.sessionStorage.setItem("Mydata",data);

Інше місце

$scope.data = $window.sessionStorage.getItem("Mydata");

Тут я побачив відповіді, і він відповідає на питання обміну даними між контролерами, але що робити, якщо я хочу, щоб один контролер повідомив іншого про те, що дані були змінені (без використання трансляції)? ЛЕГКО! Просто використовуючи відомий шаблон відвідувачів:

myApp.service('myService', function() {

    var visitors = [];

    var registerVisitor = function (visitor) {
        visitors.push(visitor);
    }

    var notifyAll = function() {
        for (var index = 0; index < visitors.length; ++index)
            visitors[index].visit();
    }

    var myData = ["some", "list", "of", "data"];

    var setData = function (newData) {
        myData = newData;
        notifyAll();
    }

    var getData = function () {
        return myData;
    }

    return {
        registerVisitor: registerVisitor,
        setData: setData,
        getData: getData
    };
}

myApp.controller('firstController', ['$scope', 'myService',
    function firstController($scope, myService) {

        var setData = function (data) {
            myService.setData(data);
        }

    }
]);

myApp.controller('secondController', ['$scope', 'myService',
    function secondController($scope, myService) {

        myService.registerVisitor(this);

        this.visit = function () {
            $scope.data = myService.getData();
        }

        $scope.data = myService.getData();
    }
]);

Таким простим способом один контролер може оновити інший контролер, щоб деякі дані були оновлені.

Я створив фабрику, яка контролює спільну область дії між шаблоном маршруту маршруту, тому ви можете підтримувати спільні дані лише тоді, коли користувачі пересуваються в одному батьківському шляху маршруту.

.controller('CadastroController', ['$scope', 'RouteSharedScope',
    function($scope, routeSharedScope) {
      var customerScope = routeSharedScope.scopeFor('/Customer');
      //var indexScope = routeSharedScope.scopeFor('/');
    }
 ])

Отже, якщо користувач піде в інший шлях маршруту, наприклад, "/ Підтримка", спільні дані для шляху "/ Клієнт" будуть автоматично знищені. Але, якщо замість цього, користувач піде на «дочірні» контури, як-от «/ Клієнт / 1» або «/ Клієнт / список», область застосування не буде знищена.

Ви можете подивитися зразок тут: http://plnkr.co/edit/OL8of9

1

using $localStorage

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

2

Після натискання ви можете викликати метод, який викликає трансляцію:

$rootScope.$broadcast('SOME_TAG', 'your value');

and the second controller will listen on this tag like:
$scope.$on('SOME_TAG', function(response) {
      // ....
})

3

using $rootScope:

4

window.sessionStorage.setItem("Mydata",data);
$scope.data = $window.sessionStorage.getItem("Mydata");

5

Один із способів використання кутового сервісу:

var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});

app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});

Створіть заводський модуль у своєму модулі та додайте посилання на завод у контролері та використовуйте його змінні в контролері, а тепер отримайте значення даних в іншому контролері, додавши посилання, куди хочете.

Я не знаю, чи це комусь допоможе, але на основі відповіді Charx (спасибі!) Я створив просту службу кешування. Сміливо користуйтеся, реміксуйте та діліться:

angular.service('cache', function() {
    var _cache, _store, _get, _set, _clear;
    _cache = {};

    _store = function(data) {
        angular.merge(_cache, data);
    };

    _set = function(data) {
        _cache = angular.extend({}, data);
    };

    _get = function(key) {
        if(key == null) {
            return _cache;
        } else {
            return _cache[key];
        }
    };

    _clear = function() {
        _cache = {};
    };

    return {
        get: _get,
        set: _set,
        store: _store,
        clear: _clear
    };
});

Один із способів використання кутового сервісу:

var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});


app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});



<div ng-app='home'>

<div ng-controller='one'>
  Type in text: 
  <input type='text' ng-model="inputText.o"/>
</div>
<br />

<div ng-controller='two'>
  Type in text:
  <input type='text' ng-model="inputTextTwo.o"/>
</div>

</div>

https://jsfiddle.net/1w64222q/

FYI Об'єкт $ області має $ емісію, $ трансляцію, $ на І Об'єкт $ rootScope має однаковий $ емісію, $ трансляцію, $ на

детальніше про опублікувати / передплатити шаблон дизайну в кутовому тут

Для вдосконалення рішення, запропонованого @Maxim за допомогою $ Broadcast, надсилання даних не змінюється

$rootScope.$broadcast('SOME_TAG', 'my variable');

але для прослуховування даних

$scope.$on('SOME_TAG', function(event, args) {
    console.log("My variable is", args);// args is value of your variable
})

Є три способи зробити це,

а) користування послугою

б) Використання залежних відносин батько / дитина між областями контролера.

c) У кутовому 2.0 "As" ключове слово буде передавати дані від одного контролера до іншого.

Для отримання додаткової інформації з прикладом, будь ласка, перевірте нижче за посиланням:

http://www.tutespace.com/2016/03/angular-js.html

var custApp = angular.module("custApp", [])
.controller('FirstController', FirstController)
.controller('SecondController',SecondController)
.service('sharedData', SharedData);

FirstController.$inject = ['sharedData'];
function FirstController(sharedData) {
this.data = sharedData.data;
}

SecondController.$inject['sharedData'];
function SecondController(sharedData) {
this.data = sharedData.data;
}

function SharedData() {
this.data = {
    value: 'default Value'
}
}

Перший контролер

<div ng-controller="FirstController as vm">
<input type=text ng-model="vm.data.value" />
</div>

Другий контролер

 <div ng-controller="SecondController as vm">
    Second Controller<br>
    {{vm.data.value}}
</div>

Я думаю, що

Кращий спосіб

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

Вашою карткою буде Контролер

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

Ви також можете додати

if($localStorage.selectedObj){
    $scope.selectedProducts = $localStorage.selectedObj;
}else{
    //redirect to select product using $location.url('/select-product')
}