AngularJS: Як я можу передавати змінні між контролерами?

У мене є два кутові контролери:

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
}

Я не можу використовувати Ctrl1всередині, Ctrl2оскільки це не визначено. Однак якщо я спробую передати це так…

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

Я отримую помилку. Хтось знає, як це зробити?

Робимо

Ctrl2.prototype = new Ctrl1();

Також не вдається.

ПРИМІТКА. Ці контролери не вкладаються один в одного.

Один із способів ділитися змінними на декілька контролерів - це створити службу та ввести її в будь-який контролер, де ви хочете її використовувати.

Простий приклад обслуговування:

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

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

Використання послуги в контролері:

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

Це дуже добре описано в цьому блозі (Урок 2 і зокрема).

Я виявив, що якщо ви хочете прив’язатись до цих властивостей через декілька контролерів, це працює краще, якщо ви прив'язуєте до властивості об'єкта замість примітивного типу (булева, рядова, число), щоб зберегти обмежену посилання.

Приклад: var property = { Property1: 'First' };замість var property = 'First';.

ОНОВЛЕННЯ: Щоб (сподіваємось) зробити речі більш зрозумілими, тут є загадка, яка показує приклад:

• Прив’язка до статичних копій спільного значення (у myController1)
  • Прив’язка до примітиву (рядок)
  • Прив’язка до властивості об'єкта (збережена у змінній області)
• Прив’язка до загальних значень, які оновлюють інтерфейс користувача, оскільки значення оновлюються (у myController2)
  • Прив’язка до функції, яка повертає примітив (рядок)
  • Прив’язка до властивості об’єкта
  • Двостороння прив’язка до властивості об'єкта

Мені подобається ілюструвати прості речі простими прикладами :)

Ось дуже простий Serviceприклад:

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

А тут jsbin

І ось дуже простий Factoryприклад:

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

А тут jsbin

Якщо це занадто просто, ось більш складний приклад

Також дивіться відповідь тут щодо пов’язаних коментарів щодо найкращих практик

--- Я знаю, що ця відповідь не для цього питання, але я хочу, щоб люди, які читають це питання і хочуть звертатися до таких служб, як Фабрики, уникали проблем з цим ----

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

Служби - НАЙКРАЩА ПРАКТИКА для обміну даними між вкладеними контролерами.

Дуже хороша примітка до цієї теми про обмін даними - це як оголошувати об’єкти. Мені не пощастило, бо я потрапив у пастку AngularJS, перш ніж прочитати про це, і мене дуже засмутило. Тож дозвольте мені допомогти вам уникнути цієї неприємності.

Я читав з "ng-книги: Повна книга про AngularJS", що n-моделі AngularJS, які створюються в контролерах як голі дані, є НЕПРАВНИМ!

Елемент діапазону $ повинен бути створений так:

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

І не так:

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

Це тому, що DOM (найкращий ПРАКТИКА) рекомендує DOM (html-документ) містити дзвінки як

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

Це дуже корисно для вкладених контролерів, якщо ви хочете, щоб ваш дочірний контролер міг змінити об'єкт від батьківського контролера ....

Але у вашому випадку ви не хочете вкладених областей застосування, але є аналогічний аспект, щоб отримати об’єкти від служб до контролерів.

Скажімо, у вас є служба "Фабрика", а в просторі повернення є об'єктA, який містить objectB, який містить objectC.

Якщо з вашого контролера ви хочете отримати об'єктC у вашу область, помилка сказати:

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

Це не працює ... Натомість використовуйте лише одну крапку.

$scope.neededObjectInController = Factory.ObjectA;

Потім у DOM ви можете викликати objectC від objectA. Це найкраща практика, пов'язана з фабриками, і найголовніше, це допоможе уникнути несподіваних та непридатних помилок.

Рішення без створення сервісу, використовуючи $ 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>

Зразок вище, працював як шарм. Я просто зробив модифікацію на випадок, якщо мені потрібно керувати кількома значеннями. Я сподіваюся, що це допомагає!

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

    var hashtable = {};

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

Я схильний використовувати цінності, радий будь-кому обговорити, чому це погана ідея ..

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

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

Потім введіть значення відповідно до послуги.

Встановити в ctrl1:

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

та доступ із ctrl2:

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

});

Наступний приклад показує, як передавати змінні між контролерами братів та сестер та вжити заходів, коли значення змінюється.

Використовуйте приклад випадку: у вас є бічний фільтр, який змінює вміст іншого представлення.

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>

Я хотів би зробити свій внесок у це питання, зазначивши, що рекомендований спосіб обміну даними між контролерами та навіть директивами - це використання сервісів (фабрик), як уже було зазначено, але також я хотів би надати робочий практичний приклад того, як це робити.

Ось робочий планкер: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Спочатку створіть свою службу , яка матиме ваші спільні дані :

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

Потім просто введіть їх на контролери та захопіть спільні дані у вашому масштабі:

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

Ви також можете зробити це для своїх директив , це працює так само:

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

Сподіваюся, що ця практична та чиста відповідь комусь може бути корисною.

Ви можете це зробити на службах або на фабриках. Вони по суті однакові за деякими основними відмінностями. Я знайшов це пояснення на thinkter.io найпростішим для наслідування. Простий, до речі і ефективний.

Чи не могли ви також зробити власність частиною батьківського діапазону?

$scope.$parent.property = somevalue;

Я не кажу, що це правильно, але це працює.

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

https://github.com/gsklee/ngStorage

Визначте параметри за замовчуванням:

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

Доступ до значень:

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

Зберігайте значення

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

Не забудьте ввести ngStorage у додаток та $ localStorage у свій контролер.

Є два способи зробити це

1) Скористайтеся послугою get / set

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

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

Другий підхід:

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>

Більш детально див. Plunker:

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

Якщо ви не хочете надавати послуги, то можете зробити так.

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

Окрім $ rootScope та сервісів, існує чітке та просте альтернативне рішення для збільшення кутового для додавання спільних даних:

в контролерах:

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

Ці властивості належать до "кутових" об'єктів, відокремлених від областей, і їх можна ділити в областях та послугах.

1 вигода від того, що вам не доведеться вводити об'єкт: вони доступні в будь-якому місці відразу після вашого визначення!