changing variable value from another controller

Question

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

BKM · Accepted Answer · 2014-03-21 11:14:53Z

2

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

}

edited Mar 21, 2014 at 11:14

answered Mar 20, 2014 at 12:04

BKM

7,0797 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

BKM Over a year ago

Updated answer please check

TheRocketSurgeon Over a year ago

See my example below. If you use a service in both controllers and bind to a property in the service, you don't need a watch. Dependency injection and two-way binding take care of updating the data.

Alex Man Over a year ago

@BKM what do you say about implementing service rather than watch

BKM Over a year ago

It depends upon you, which one you find more comfortable to use in your scenario

BKM Over a year ago

In your case you just want to trigger a change in the $scope value of your FileCointroller if some value changes in TypeController. So there isn't any need of using service here. If you are not interested in using $rootScope you could use $broadcast and $on events to handle the scenario.

|

TheRocketSurgeon · Accepted Answer · 2014-03-21 21:12:24Z

2

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

edited Mar 21, 2014 at 21:12

answered Mar 20, 2014 at 19:14

TheRocketSurgeon

1465 bronze badges

5 Comments

Alex Man Over a year ago

but here fileproperty.allowsFiles model is within FileController right...so how can i change select using service

TheRocketSurgeon Over a year ago

I'll update my example when I get back to my computer. But basically imagine fileproperty is FruitService and allowFiles is selected.

TheRocketSurgeon Over a year ago

What I'm getting at is move the model to the service so you can share it. Use the controllers to manage the UI and the service to share your models. Tomorrow morning (AEST) I'll update my example to illustrate.

TheRocketSurgeon Over a year ago

@user123 I've updated my snippets in this post as well as the codepen. You should fork the codepen and play with it and you will see how it works.

TheRocketSurgeon Over a year ago

I think that in Angular you should first use two-way binding, then scope.$watch, and only then if it those two solutions don't solve your problem, then use events.

Collectives™ on Stack Overflow

changing variable value from another controller

2 Answers 2

8 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related