Question

我有2个控制器。我想做一个简单的切换，如果调用一个函数，它会隐藏另一个控制器中的代码。这就是我的......

角：

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>

链接到Plunkr： http://plnkr.co/edit/zOAf5vGMTAd8A10NGiS1?p=preview

是否无法使用控制器隐藏另一个控制器中的代码？

Answer 1

你不需要使用$ emit，$ rootScope。$ broadcast或其他东西

在您的代码中，您向工厂询问了局部变量的值，您无法更新它，因为每次启动该方法时都会创建一个新变量;

这是一个有效的例子，希望它能帮到你

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

工厂声明一些有用的方法，如更新和获取隐藏值

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

控制器声明一些变量，这些变量是对工厂方法的引用

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

}]);

html，ng-if指令调用isHide方法，链接到工厂的getDisplayMode方法

  <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>

Answer 2

你和你的工厂在一半左右，你有大部分的二传手而不是吸气剂。这就是我要改变的地方。

厂：

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

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

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

  return fac;
});

控制器：

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

Answer 3

请参见此处：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>

Answer 4

你想使用$ emit。

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

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

控制器将$ scope.var隐藏在另一个带有角度的控制器中

4 个答案: