CODEWITHSUNDEEP
javascriptangularjs
Alex Man
Alex Man

Reputation: 4886

changing variable value from another controller

I've created an application in angular js. In the application i'm having three controllers. The first controller MainController is in the body tag, within which i have another two controller FileController and TypeController.

Inside the TypeController I've a select box having the model name data.selectedFileTypes which shows several filenames. Now within the FileController controller I've another select box with model name fileproperty.allowsFiles, and having Yes and No values. The first time it get initialized within the FileController controller.

But when i select a different file from the select of the model data.selectedFileTypes how can i change the select value again to No of the model fileproperty.allowsFiles from the ng-change function of the file select

an anyone please tell me some solution for this

html

<body ng-controller="MainController">
        :
        :
        <div ng-controller="TypeController">
          <select ng-model="data.selectedFileTypes" ng-options="type.name for type in config.fileTypes ng-change="select()">
          </select>
        </div>
        :
        :
        <div ng-controller="FileController">
            <select ng-model="fileproperty.allowsFiles" ng-options="option.value as option.desc for option in files.options"></select>
        </div>
        :
        :
</body>

script

app.controller('TypeController', function($rootScope, $scope)
{
    $scope.select = function()
    {
    :

    :
    }
}

app.controller('FileController', function($rootScope, $scope)
{
    $scope.fileproperty.allowsFiles = 'No';
}

Upvotes: 1

Views: 1775

Answers (2)

TheRocketSurgeon
TheRocketSurgeon

Reputation: 146

I think it's better practice to put shared properties into a service, then inject the service in both controllers.

Doesn't seem right to abuse a global namespace such as $rootScope when you don't have to.

Here's an example of a single service being bound to a select in one controller's scope and the same service being used in a second controller's scope to display the value in the service.

Here's a codepen: http://cdpn.io/LeirK and the snippets of code below

Here's the HTML:

<div ng-app="MyApp">
  <div ng-controller="MainController">
    <select ng-model='fileproperties.allowFiles'>
      <option id="No">No</option>
      <option id="Yes">Yes</option>
    </select>
    <div ng-controller="FileController">
      {{fileproperties.allowFiles}}
    <div>
  </div>
</div>

And the Javascript:

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

app.controller('MainController', ['$scope', 'FilePropertiesService', function(scope, fileproperties) {
  scope.fileproperties = fileproperties;
}]);

app.controller('FileController', ['$scope', 'FilePropertiesService', function(scope, fileproperties) {
  scope.fileproperties = fileproperties
}]);

app.service('FilePropertiesService', function(){
  this.allowFiles = 'No';
});

Upvotes: 2

BKM
BKM

Reputation: 7079

Try this method.

app.controller('MainController', function($rootScope, $scope)
{
    $scope.select = function()
    {
    :
      $rootScope.selectedFiles = $scope.data.selectedFileTypes;
    :
    }
}

Inside your second controller

app.controller('FileController', function($rootScope, $scope)
{
    $scope.$watch('selectedFiles', function () {
       $scope.fileproperty.allowsFiles = 'No';
   }, true);

}

You could also use $broadcast and $on here to handle this scenario:

app.controller('MainController', function($rootScope, $scope)
{
    $scope.select = function()
    {
       $scope.$broadcast('someevent');
    }
}

Inside your second controller

app.controller('FileController', function($rootScope, $scope)
{
    $scope.$on('someevent', function () {
       $scope.fileproperty.allowsFiles = 'No';
   });

}

Upvotes: 2

Related Questions