AngularjsControllersSharingData

Controllers sharing data

by horaciodev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" id="outer">
  <div id="inner1" ng-controller="FirstController as firstCtrl">
       <input type="file" id="txtFile" name="txtFile" maxlength="5" multiple accept=".csv" 
filesread="firstCtrl.myFileList"
update-data="firstCtrl.updateData(firstCtrl.myFileList)"/>
               <div>
                    <ul>
                        <li ng-repeat="item in firstCtrl.myFileList">
                            <fileuploadrow my-file="item"></fileuploadrow>
                        </li>
                    </ul>
                </div>
      <button  id="btnUpload"
                        ng-click="firstCtrl.uploadFiles()"
                        ng-disabled="firstCtrl.disableUpload()">
                    Upload
                </button>
      
      
  </div>
    <div id="inner2" ng-controller="SecondController as secondCtrl">
        <ul ng-repeat="fi in secondCtrl.myFileList">
            <li>Hello</li>
        </ul>    
    </div>    
</div>

JavaScript

angular.module('myApp', [])
.controller('FirstController',['$scope','filecomm',function ($scope,filecomm) {
    this.myFileList = filecomm.myFileList; 

    this.disableUpload = function () {
        if (this.myFileList) {
            return (this.myFileList.length === 0);
        }
        return false;
    };

    this.uploadFiles = function () {
        var numFiles = this.myFileList.length;
        var numDummies = this.dummyList.length;
        filecomm.addDummy('dummy no' + numDummies + 1);
        console.log('Files uploaded when clicked:' + numFiles);
        console.log('dummy is now:'+ this.dummyList.length);
    };
    
    this.updateData = function(newData){
        filecomm.updateData(newData);
        console.log('updated data first controller:' + newData.length);
    };

    this.dummyList = filecomm.dummyList;
    
    console.log('length at init:' + this.myFileList.length);
}]) //FirstController

.controller('SecondController', ['$scope', 'filecomm', function ($scope,filecomm) {
    var self = this;
    self.myFileList = filecomm.myFileList;

    self.dummyList = filecomm.dummyList;

    console.log('ProgressDialogController myFileList - length at init:' + self.myFileList.length);
    console.log('ProgressDialogController dummyList - length at init:' + self.dummyList.length);
}])  //Second Controller

.directive('filesread',[function () {
    return {
        restrict: 'A',
        scope: {
            filesread: '=',
            updateData: '&'
        },
        link: function (scope, elm, attrs) {
            
            scope.$watch('filesread',function(newVal, oldVal){
                console.log('filesread changed to length:' + scope.filesread.length);
                
            });
            
            scope.dataFileChangedFunc = function(){
                scope.updateData();
                console.log('calling data update from directive:' +  scope.filesread.length);
            };
            
            elm.bind('change',...