AngularJS: Bagaimana saya bisa meneruskan variabel antara pengontrol?

Saya memiliki dua pengontrol sudut:

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
}

Saya tidak dapat menggunakan Ctrl1di dalam Ctrl2karena tidak terdefinisi. Namun jika saya mencoba untuk meneruskannya seperti itu ...

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

Saya mendapatkan kesalahan. Adakah yang tahu bagaimana melakukan ini?

Perbuatan

Ctrl2.prototype = new Ctrl1();

Juga gagal.

CATATAN: Kontroler ini tidak saling bersarang.

Salah satu cara untuk membagikan variabel di beberapa pengontrol adalah dengan membuat layanan dan menyuntikkannya ke pengontrol mana pun yang Anda inginkan.

Contoh layanan sederhana:

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

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

Menggunakan layanan di pengontrol:

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

Ini dijelaskan dengan sangat baik di blog ini (Pelajaran 2 dan khususnya).

Saya telah menemukan bahwa jika Anda ingin mengikat properti ini di banyak pengontrol, ia berfungsi lebih baik jika Anda mengikat ke properti objek daripada tipe primitif (boolean, string, angka) untuk mempertahankan referensi terikat.

Contoh: var property = { Property1: 'First' };bukannya var property = 'First';.

UPDATE: Untuk (mudah-mudahan) membuat semuanya lebih jelas di sini adalah biola yang menunjukkan contoh:

• Mengikat salinan statis dari nilai bersama (di myController1)
  • Mengikat ke primitif (string)
  • Mengikat ke properti objek (disimpan ke variabel lingkup)
• Mengikat nilai bersama yang memperbarui UI saat nilai diperbarui (di myController2)
  • Mengikat ke fungsi yang mengembalikan primitif (string)
  • Mengikat ke properti objek
  • Mengikat dua arah ke properti objek

Saya suka menggambarkan hal-hal sederhana dengan contoh sederhana :)

Ini adalah contoh yang sangat sederhana 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;
});

Dan di sini jsbin

Dan ini adalah contoh yang sangat sederhana 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;
});

Dan di sini jsbin

Jika itu terlalu sederhana, berikut ini contoh yang lebih canggih

Lihat juga jawabannya di sini untuk komentar praktik terbaik terkait

--- Saya tahu jawaban ini bukan untuk pertanyaan ini, tetapi saya ingin orang yang membaca pertanyaan ini dan ingin menangani Layanan seperti Pabrik untuk menghindari kesulitan melakukan hal ini ----

Untuk ini, Anda perlu menggunakan Layanan atau Pabrik.

Layanan adalah PRAKTEK TERBAIK untuk berbagi data antara pengontrol yang tidak bersarang.

Anotasi yang sangat bagus tentang topik ini tentang berbagi data adalah cara mendeklarasikan objek. Saya tidak beruntung karena saya jatuh dalam perangkap Angular sebelum saya membacanya, dan saya sangat frustrasi. Jadi izinkan saya membantu Anda menghindari masalah ini.

Saya membaca dari "buku-ng: Buku lengkap tentang AngularJS" bahwa model-AngularJS yang dibuat dalam pengontrol karena data kosong SALAH!

Elemen $ scope harus dibuat seperti ini:

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

Dan tidak seperti ini:

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

Ini karena direkomendasikan (PRAKTEK TERBAIK) agar DOM (dokumen html) mengandung panggilan sebagai

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

Ini sangat membantu bagi pengendali bersarang jika Anda ingin pengendali anak Anda dapat mengubah objek dari pengendali induk ....

Tetapi dalam kasus Anda, Anda tidak ingin cakupan bersarang, tetapi ada aspek serupa untuk mendapatkan objek dari layanan ke pengendali.

Katakanlah Anda memiliki layanan Anda 'Pabrik' dan di ruang kembali ada objectA yang berisi objectB yang berisi objectC.

Jika dari controller Anda ingin MENDAPATKAN objectC ke dalam lingkup Anda, adalah kesalahan untuk mengatakan:

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

Itu tidak akan berhasil ... Alih-alih hanya menggunakan satu titik.

$scope.neededObjectInController = Factory.ObjectA;

Kemudian, di DOM Anda dapat memanggil objectC dari objectA. Ini adalah praktik terbaik terkait dengan pabrik, dan yang paling penting, ini akan membantu untuk menghindari kesalahan yang tidak terduga dan tidak dapat ditangkap.

Solusi tanpa membuat Layanan, menggunakan $ rootScope:

Untuk berbagi properti di Pengontrol aplikasi, Anda dapat menggunakan Angular $ rootScope. Ini adalah pilihan lain untuk berbagi data, menaruhnya agar orang tahu tentangnya.

Cara yang disukai untuk berbagi beberapa fungsionalitas di Pengontrol adalah Layanan, untuk membaca atau mengubah properti global yang dapat Anda gunakan $ 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;
}]);

Menggunakan $ rootScope dalam templat (Mengakses properti dengan $ root):

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

Sampel di atas bekerja seperti pesona. Saya baru saja melakukan modifikasi kalau-kalau saya perlu mengelola beberapa nilai. Saya harap ini membantu!

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

    var hashtable = {};

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

Saya cenderung menggunakan nilai-nilai, senang bagi siapa saja untuk membahas mengapa ini adalah ide yang buruk ..

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

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

Kemudian menyuntikkan nilai sesuai layanan.

Diatur dalam ctrl1:

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

dan akses dari ctrl2:

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

});

Contoh berikut menunjukkan bagaimana cara mengirimkan variabel antara pengontrol saudara kandung dan mengambil tindakan saat nilainya berubah.

Contoh penggunaan kasus: Anda memiliki filter di bilah sisi yang mengubah konten tampilan lain.

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>

Saya ingin berkontribusi pada pertanyaan ini dengan menunjukkan bahwa cara yang disarankan untuk berbagi data antara pengontrol, dan bahkan arahan, adalah dengan menggunakan layanan (pabrik) seperti yang telah ditunjukkan, tetapi juga saya ingin memberikan Contoh praktis bagaimana cara kerja yang harus dilakukan.

Berikut adalah plunker yang berfungsi: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info

Pertama, buat layanan Anda , yang akan memiliki data Anda bersama :

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

Kemudian, cukup suntikkan pada pengontrol Anda dan ambil data yang dibagikan di lingkup Anda:

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

Anda juga dapat melakukan itu untuk arahan Anda , itu bekerja dengan cara yang sama:

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

Semoga jawaban yang praktis dan bersih ini dapat bermanfaat bagi seseorang.

Anda dapat melakukannya dengan layanan atau pabrik. Mereka pada dasarnya sama untuk beberapa perbedaan inti. Saya menemukan penjelasan ini di thinkster.io sebagai yang paling mudah diikuti. Sederhana, to the point dan efektif.

Tidak bisakah Anda juga menjadikan properti bagian dari lingkup induk?

$scope.$parent.property = somevalue;

Saya tidak mengatakan itu benar tetapi berhasil.

Ah, punya sedikit barang baru ini sebagai alternatif lain. Ini penyimpanan lokal, dan bekerja di mana sudut bekerja. Sama-sama. (Tapi sungguh, terima kasih padanya)

https://github.com/gsklee/ngStorage

Tetapkan standar Anda:

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

Akses nilai-nilai:

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

Simpan nilainya

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

Ingatlah untuk menyuntikkan ngStorage di aplikasi Anda dan $ localStorage di controller Anda.

Ada dua cara untuk melakukan ini

1) Gunakan layanan get / set

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

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

Pendekatan Kedua:

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>

Untuk lebih jelasnya lihat plunker:

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

Jika Anda tidak ingin membuat layanan maka Anda dapat melakukannya seperti ini.

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

Selain $ rootScope dan layanan, ada solusi alternatif yang bersih dan mudah untuk memperluas sudut untuk menambahkan data bersama:

di controller:

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

Properti ini milik objek 'sudut', dipisahkan dari ruang lingkup, dan dapat dibagi dalam ruang lingkup dan layanan.

Satu manfaat dari itu adalah Anda tidak harus menyuntikkan objek: mereka dapat diakses di mana saja segera setelah defination Anda!