แบ่งปันข้อมูลระหว่างคอนโทรลเลอร์ AngularJS

ฉันกำลังพยายามแชร์ข้อมูลข้ามคอนโทรลเลอร์ Use-case เป็นรูปแบบหลายขั้นตอนข้อมูลที่ป้อนในหนึ่งอินพุตจะถูกใช้ในภายหลังในสถานที่แสดงผลหลายแห่งนอกตัวควบคุมดั้งเดิม รหัสด้านล่างและในjsfiddle ที่นี่

HTML

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="FirstName"><!-- Input entered here -->
    <br>Input is : <strong>{{FirstName}}</strong><!-- Successfully updates here -->
</div>

<hr>

<div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}<!-- How do I automatically updated it here? -->
</div>

JS

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// make a factory to share data between controllers
myApp.factory('Data', function(){
    // I know this doesn't work, but what will?
    var FirstName = '';
    return FirstName;
});

// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

ความช่วยเหลือใด ๆ ที่ชื่นชมอย่างมาก

วิธีแก้ปัญหาง่ายๆคือให้โรงงานของคุณส่งคืนวัตถุและให้ผู้ควบคุมของคุณทำงานกับการอ้างอิงไปยังวัตถุเดียวกัน:

JS:

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// Create the factory that share the Fact
myApp.factory('Fact', function(){
  return { Field: '' };
});

// Two controllers sharing an object that has a string in it
myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Fact;
});

myApp.controller('SecondCtrl', function( $scope, Fact ){
  $scope.Beta = Fact;
});

HTML:

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="Alpha.Field">
    First {{Alpha.Field}}
</div>

<div ng-controller="SecondCtrl">
<input type="text" ng-model="Beta.Field">
    Second {{Beta.Field}}
</div>

ตัวอย่าง: http://jsfiddle.net/HEdJF/

เมื่อแอปพลิเคชันมีขนาดใหญ่ขึ้นมีความซับซ้อนและยากต่อการทดสอบคุณอาจไม่ต้องการให้แสดงวัตถุทั้งหมดจากโรงงานด้วยวิธีนี้ แต่ให้การเข้าถึงแบบ จำกัด เช่นผ่าน getters และ setters แทน:

myApp.factory('Data', function () {

    var data = {
        FirstName: ''
    };

    return {
        getFirstName: function () {
            return data.FirstName;
        },
        setFirstName: function (firstName) {
            data.FirstName = firstName;
        }
    };
});

ด้วยวิธีนี้มันขึ้นอยู่กับผู้ควบคุมการบริโภคเพื่ออัพเดทโรงงานด้วยค่าใหม่และดูการเปลี่ยนแปลงเพื่อให้ได้มา:

myApp.controller('FirstCtrl', function ($scope, Data) {

    $scope.firstName = '';

    $scope.$watch('firstName', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.setFirstName(newValue);
    });
});

myApp.controller('SecondCtrl', function ($scope, Data) {

    $scope.$watch(function () { return Data.getFirstName(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.firstName = newValue;
    });
});

HTML:

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="firstName">
  <br>Input is : <strong>{{firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{firstName}}
</div>

ตัวอย่าง: http://jsfiddle.net/27mk1n1o/

ฉันไม่ต้องการใช้$watchสำหรับสิ่งนี้ แทนที่จะกำหนดบริการทั้งหมดให้กับขอบเขตของคอนโทรลเลอร์คุณสามารถกำหนดข้อมูลได้

JS:

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

myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    }
    // Other methods or objects can go here
  };
});

myApp.controller('FirstCtrl', function($scope, MyService){
  $scope.data = MyService.data;
});

myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;
});

HTML:

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="data.firstName">
  <br>Input is : <strong>{{data.firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
</div>

หรือคุณสามารถอัปเดตข้อมูลบริการด้วยวิธีโดยตรง

JS:

// A new factory with an update method
myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    },
    update: function(first, last) {
      // Improve this method as needed
      this.data.firstName = first;
      this.data.lastName = last;
    }
  };
});

// Your controller can use the service's update method
myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;

   $scope.updateData = function(first, last) {
     MyService.update(first, last);
   }
});

มีหลายวิธีที่คุณสามารถแชร์ข้อมูลระหว่างตัวควบคุมได้

1. ใช้บริการ
2. ใช้บริการ $ state.go
3. ใช้สถานะ
4. ใช้ rootcope

คำอธิบายของแต่ละวิธี:

1. ฉันจะไม่อธิบายตามที่บางคนอธิบายไว้แล้ว

2. การใช้ $state.go

     $state.go('book.name', {Name: 'XYZ'}); 
   
     // then get parameter out of URL
     $state.params.Name;

3. $stateparamทำงานในลักษณะที่คล้ายกับ$state.goคุณส่งผ่านเป็นวัตถุจากตัวควบคุมผู้ส่งและรวบรวมในตัวควบคุมตัวรับสัญญาณโดยใช้สถานะของ

4. การใช้ $rootscope

   (a) การส่งข้อมูลจากลูกไปยังตัวควบคุมหลัก

     $scope.Save(Obj,function(data) {
         $scope.$emit('savedata',data); 
         //pass the data as the second parameter
     });
   
     $scope.$on('savedata',function(event,data) {
         //receive the data as second parameter
     }); 

   (b) การส่งข้อมูลจากพาเรนต์ไปยังตัวควบคุมลูก

     $scope.SaveDB(Obj,function(data){
         $scope.$broadcast('savedata',data);
     });
   
     $scope.SaveDB(Obj,function(data){`enter code here`
         $rootScope.$broadcast('saveCallback',data);
     });

ฉันได้สร้างโรงงานที่ควบคุมขอบเขตการแชร์ระหว่างรูปแบบของเส้นทางของเส้นทางดังนั้นคุณสามารถรักษาข้อมูลที่ใช้ร่วมกันได้เมื่อผู้ใช้นำทางในเส้นทางหลักของเส้นทางเดียวกัน

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

ดังนั้นหากผู้ใช้ไปที่เส้นทางเส้นทางอื่นเช่น '/ Support' ข้อมูลที่ใช้ร่วมกันสำหรับเส้นทาง '/ ลูกค้า' จะถูกทำลายโดยอัตโนมัติ แต่หากผู้ใช้ไปที่เส้นทาง 'child' แทนที่จะเป็น '/ ลูกค้า / 1' หรือ '/ ลูกค้า / รายการ' ขอบเขตจะไม่ถูกทำลาย

คุณสามารถดูตัวอย่างได้ที่นี่: http://plnkr.co/edit/OL8of9

มีหลายวิธีในการแบ่งปันข้อมูลระหว่างตัวควบคุม

• บริการเชิงมุม
• $ Broadcast วิธี $ emit
• การสื่อสารระหว่างผู้ปกครองกับเด็ก
• $ rootscope

อย่างที่เราทราบกัน$rootscopeดีกว่าว่าวิธีการถ่ายโอนข้อมูลหรือการสื่อสารไม่เป็นที่นิยมเนื่องจากเป็นขอบเขตทั่วโลกที่มีให้สำหรับแอปพลิเคชันทั้งหมด

สำหรับการแบ่งปันข้อมูลระหว่างผู้ควบคุม Angular Js บริการ Angular เป็นแนวทางปฏิบัติที่ดีที่สุดเช่น .factory, .service
สำหรับการอ้างอิง

ในกรณีที่มีการถ่ายโอนข้อมูลจากแม่เพื่อควบคุมเด็กคุณสามารถเข้าถึงข้อมูลของผู้ปกครองโดยตรงในการควบคุมเด็กผ่าน$scope
ถ้าคุณกำลังใช้ui-routerแล้วคุณสามารถใช้$stateParmasเพื่อส่งผ่านพารามิเตอร์ URL เช่นid, name, keyฯลฯ

$broadcastเป็นวิธีที่ดีในการถ่ายโอนข้อมูลระหว่างตัวควบคุมจากผู้ปกครองไปยังเด็กและ$emitการถ่ายโอนข้อมูลจากเด็กไปยังตัวควบคุมหลัก

HTML

<div ng-controller="FirstCtrl">
   <input type="text" ng-model="FirstName">
   <br>Input is : <strong>{{FirstName}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
   Input should also be here: {{FirstName}}
</div>

JS

myApp.controller('FirstCtrl', function( $rootScope, Data ){
    $rootScope.$broadcast('myData', {'FirstName': 'Peter'})
});

myApp.controller('SecondCtrl', function( $rootScope, Data ){
    $rootScope.$on('myData', function(event, data) {
       $scope.FirstName = data;
       console.log(data); // Check in console how data is coming
    });
});

อ้างอิงลิงค์ที่ให้มาเพื่อทราบข้อมูลเพิ่มเติมเกี่ยวกับ$broadcast

วิธีที่ง่ายที่สุด:

ฉันได้ใช้บริการ AngularJS

ขั้นที่ 1:ฉันได้สร้างบริการ AngularJS ชื่อ SharedDataService

myApp.service('SharedDataService', function () {
     var Person = {
        name: ''

    };
    return Person;
});

ขั้นตอนที่ 2:สร้างตัวควบคุมสองตัวและใช้บริการที่สร้างขึ้นด้านบน

//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
   function ($scope, SharedDataService) {
   $scope.Person = SharedDataService;
   }]);

//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
   function ($scope, SharedDataService) {
   $scope.Person = SharedDataService;
   }]);

ขั้นตอนที่ 3:เพียงใช้ตัวควบคุมที่สร้างขึ้นในมุมมอง

<body ng-app="myApp">

<div ng-controller="FirstCtrl">
<input type="text" ng-model="Person.name">
<br>Input is : <strong>{{Person.name}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
Input should also be here: {{Person.name}}
</div>

</body>

หากต้องการดูวิธีแก้ปัญหาการทำงานโปรดกดลิงก์ด้านล่าง

https://codepen.io/wins/pen/bmoYLr

ไฟล์. html:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp">

  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="Person.name">
    <br>Input is : <strong>{{Person.name}}</strong>
   </div>

<hr>

  <div ng-controller="SecondCtrl">
    Input should also be here: {{Person.name}}
  </div>

//Script starts from here

<script>

var myApp = angular.module("myApp",[]);
//create SharedDataService
myApp.service('SharedDataService', function () {
     var Person = {
        name: ''

    };
    return Person;
});

//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
    function ($scope, SharedDataService) {
    $scope.Person = SharedDataService;
    }]);

//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
    function ($scope, SharedDataService) {
    $scope.Person = SharedDataService;
}]);

</script>


</body>
</html>

มีวิธีอื่นโดยไม่ใช้ $ watch โดยใช้ angular.copy:

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

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName); 
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

มีหลายวิธีในการทำเช่นนี้

1. กิจกรรม - อธิบายแล้วดี

2. ui เราเตอร์ - อธิบายไว้ข้างต้น

3. บริการ - พร้อมวิธีการอัพเดทที่แสดงด้านบน
4. BAD - เฝ้าดูการเปลี่ยนแปลง
5. วิธีการของเด็กผู้ปกครองอีกวิธีหนึ่งมากกว่าปล่อยและbrodcast -

* * * *

<superhero flight speed strength> Superman is here! </superhero>
<superhero speed> Flash is here! </superhero>

* * * *

app.directive('superhero', function(){
    return {
        restrict: 'E',
        scope:{}, // IMPORTANT - to make the scope isolated else we will pollute it in case of a multiple components.
        controller: function($scope){
            $scope.abilities = [];
            this.addStrength = function(){
                $scope.abilities.push("strength");
            }
            this.addSpeed = function(){
                $scope.abilities.push("speed");
            }
            this.addFlight = function(){
                $scope.abilities.push("flight");
            }
        },
        link: function(scope, element, attrs){
            element.addClass('button');
            element.on('mouseenter', function(){
               console.log(scope.abilities);
            })
        }
    }
});
app.directive('strength', function(){
    return{
        require:'superhero',
        link: function(scope, element, attrs, superHeroCtrl){
            superHeroCtrl.addStrength();
        }
    }
});
app.directive('speed', function(){
    return{
        require:'superhero',
        link: function(scope, element, attrs, superHeroCtrl){
            superHeroCtrl.addSpeed();
        }
    }
});
app.directive('flight', function(){
    return{
        require:'superhero',
        link: function(scope, element, attrs, superHeroCtrl){
            superHeroCtrl.addFlight();
        }
    }
});

ไม่แน่ใจว่าฉันเลือกรูปแบบนี้ไว้ที่ใด แต่สำหรับการแชร์ข้อมูลข้ามคอนโทรลเลอร์และลด $ rootScope และ $ scope มันใช้งานได้ดี เป็นการระลึกถึงการจำลองข้อมูลที่คุณมีผู้เผยแพร่และสมาชิก หวังว่ามันจะช่วย

บริการ:

(function(app) {
    "use strict";
    app.factory("sharedDataEventHub", sharedDataEventHub);

    sharedDataEventHub.$inject = ["$rootScope"];

    function sharedDataEventHub($rootScope) {
        var DATA_CHANGE = "DATA_CHANGE_EVENT";
        var service = {
            changeData: changeData,
            onChangeData: onChangeData
        };
        return service;

        function changeData(obj) {
            $rootScope.$broadcast(DATA_CHANGE, obj);
        }

        function onChangeData($scope, handler) {
            $scope.$on(DATA_CHANGE, function(event, obj) {
                handler(obj);
            });
        }
    }
}(app));

คอนโทรลเลอร์ที่ได้รับข้อมูลใหม่ซึ่งเป็น Publisher จะทำอะไรเช่นนี้ ..

var someData = yourDataService.getSomeData();

sharedDataEventHub.changeData(someData);

คอนโทรลเลอร์ที่ใช้ข้อมูลใหม่นี้ซึ่งเรียกว่าผู้สมัครสมาชิกจะทำอะไรเช่นนี้ ...

sharedDataEventHub.onChangeData($scope, function(data) {
    vm.localData.Property1 = data.Property1;
    vm.localData.Property2 = data.Property2;
});

สิ่งนี้จะใช้ได้กับทุกสถานการณ์ ดังนั้นเมื่อตัวควบคุมหลักถูกเตรียมใช้งานและได้รับข้อมูลมันจะเรียกเมธอด changeData ซึ่งจะเผยแพร่ข้อมูลนั้นไปยังสมาชิกทั้งหมดของข้อมูลนั้น สิ่งนี้จะช่วยลดการเชื่อมต่อของคอนโทรลเลอร์ของเราเข้าด้วยกัน

ทำมันง่าย ๆ (ทดสอบกับ v1.3.15):

<article ng-controller="ctrl1 as c1">
    <label>Change name here:</label>
    <input ng-model="c1.sData.name" />
    <h1>Control 1: {{c1.sData.name}}, {{c1.sData.age}}</h1>
</article>
<article ng-controller="ctrl2 as c2">
    <label>Change age here:</label>
    <input ng-model="c2.sData.age" />
    <h1>Control 2: {{c2.sData.name}}, {{c2.sData.age}}</h1>
</article>

<script>
    var app = angular.module("MyApp", []);

    var dummy = {name: "Joe", age: 25};

    app.controller("ctrl1", function () {
        this.sData = dummy;
    });

    app.controller("ctrl2", function () {
        this.sData = dummy;
    });
</script>