Controller hiding $scope.var in another controller with angular

Question

I have 2 controllers. I want to make a simple toggle where if a function is called it hides code in the other controller. Here is what I have...

Angular:

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

app.factory('data', function () {
  var fac = [];

  fac.hideIt = function (hide) {
    console.log(hide)
    if (hide != null)
      return true;
    else
      return false;
  };

  return fac;
});

app.controller('MainCtrl', function($scope, data) {
  $scope.name = 'World';

  console.log(data.hideIt()); //its false
  $scope.hide = data.hideIt();
});

app.controller('SecCtrl', function($scope, data) {
  $scope.hideAbove = function () {
    var hide = true;
    data.hideIt(hide);
    console.log(data.hideIt(hide)) //now it is true
  }
});

HTML:

<div ng-controller="MainCtrl">
      <div ng-if="hide == false">
        <p>Hello {{name}}!</p>
      </div>
    </div>

    <div ng-controller="SecCtrl">
      <div ng-click="hideAbove()">CLICK HERE </div>
    </div>

Link to Plunkr: http://plnkr.co/edit/zOAf5vGMTAd8A10NGiS1?p=preview

Is there no way to use a controller to hide code that is in another controller?

Polochon · Accepted Answer · 2014-08-01 15:40:08Z

You dont need to use $emit, $rootScope.$broadcast or something else

in your code you asked to the factory the value of a local variable, you cant updates it because each time you start the method a new variable was created;

Here is a working example, hope it will help you

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

The factory declare some useful methods like updates and gets hide value

app.factory('HideFactory', function () {
  var prototype = {};
  var hide = false;

  prototype.getDisplayMode = function() {
    return hide;

  } 

  prototype.hideIt = function (val) {

    hide = typeof val == 'boolean' ? val : false;
    return val;
  };

  return prototype;
});

The controllers declare some variables which are a reference to the factory methods

app.controller('MainCtrl', ['$scope', 'HideFactory',function($scope, HideFactory) {
  $scope.name = 'World';

  $scope.isHide = HideFactory.getDisplayMode;
}]);

app.controller('SecCtrl',  ['$scope', 'HideFactory', function($scope, HideFactory) {
  $scope.isHide = HideFactory.getDisplayMode;
  $scope.hideAbove = function() {
    HideFactory.hideIt(true); 
  }

}]);

And the html, the ng-if directive call the isHide method, linked to the getDisplayMode method of the factory

  <body>
    <div ng-controller="MainCtrl">
      <div ng-if="!isHide()">
        <p>Hello {{name}}!</p>
      </div>
    </div>

      <div ng-controller="SecCtrl">
        <div ng-click="hideAbove()">CLICK HERE </div>
      </div> 

  </body>

Andy Gaskell · Accepted Answer · 2014-08-01 15:27:23Z

1

You're about halfway there with your factory, you have most of a setter but not a getter. Here's what I'd change.

Factory:

app.factory('data', function () {
  var fac = [];
  var state = false;

  fac.hideIt = function (hide) {
    state = hide;
  };

  fac.hidden = function() {
    return state;
  }

  return fac;
});

Controller:

app.controller('MainCtrl', function($scope, data) {
  $scope.name = 'World';
  $scope.hide = data.hidden;
});

HTML:

<div ng-controller="MainCtrl">
  <div ng-hide="hide()">
    <p>Hello {{name}}!</p>
  </div>
</div>

Forked Plunker

answered Aug 1, 2014 at 15:27

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

Comments

sylwester · Accepted Answer · 2014-08-01 15:27:48Z

please see here: http://plnkr.co/edit/3NEErc0zUpXlb1LarXar?p=preview

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

app.factory('data', function() {
  var fac = [];
  var _hide = {};

  hideIt = function(hide) {
    console.log("from fact " + hide)
    if (hide !== null) {
      _hide.state = true;
      return _hide;
    } else
       _hide.state = false;
    return _hide;
  };

  return {
    fac: fac,
    hideIt: hideIt,
    hide: _hide

  };
});

app.controller('MainCtrl', function($scope, data) {
  $scope.name = 'World';

  //console.log(data.hideIt()); //its false
  $scope.hide = data.hide;
});

app.controller('SecCtrl', function($scope, data) {
  $scope.hideAbove = function() {
    var hide = true;
    data.hideIt(hide);

  }

});

HTML:

    <div ng-if="hide.state != true">

      <p>Hello {{name}}!</p>
    </div>
  </div>

  <div ng-controller="SecCtrl">
    <div ng-click="hideAbove()">CLICK HERE</div>
  </div>

</body>

eddiec · Accepted Answer · 2014-08-01 15:24:07Z

0

You want to use $emit.

function firstCtrl($scope){
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope){
    $scope.$emit('someEvent', [1,2,3]);
}

answered Aug 1, 2014 at 15:24

eddiec

7,6465 gold badges36 silver badges36 bronze badges

Collectives™ on Stack Overflow

Controller hiding $scope.var in another controller with angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related