angularjs - 如何根据服务中的变量设置 ng-show

Question

我不确定我应该在标题上写什么，如果标题令人困惑，请提前致歉。另外，我对 AngularJS 也不是很好。

假设我有一个包含 bool 值“已激活”的工厂“用户”。我有一个注入(inject)“用户”的“消息” Controller 。

angular.module('message', [])
    .controller('message', function($rootScope, $scope, $http, User){

        //some functions
        ...
        $scope.message = 'Helloworld';
        console.log('In Message Controller');
        console.log('debug message, User activated: ' + User.activated);    
    })

例如，我想在 message.html 中使用 ng-show

<div>
    <p>{{message}}</p>
</div>
<div ng-show="User.activated">
    <p>Debugging: This only shows up if activated is true</p>
</div>

但是调试信息没有出现。

无论如何我可以做到这一点吗？或者如果我不应该做这样的事情，有人可以建议我另一种从“用户”工厂获取变量的方法并将其与 ng-show 一起使用？例如，我想阻止使用 $scope

$scope.activated= function(){
    return User.activated;
}

在 Controller 上，因为这样如果我将来需要创建更多的 Controller ，我将不得不在 Controller 中设置一个 $scope.activated。

Answer 1

确实，您需要使用该服务。

如果你的User.activated字段应该在所有 Controller 中平等地进行，你必须使用单例。

如果您的User.activated 方法依赖于 Controller 中的值，则必须使用服务实例。

jsfiddle 上的实例.

    angular.module('ExampleApp', ['use', 'ngMessages'])
  .controller('ExampleOneController', function($scope, ReuseService) {
    //We need do copy, because ReuseService is singleton 
    $scope.reusable = angular.copy(ReuseService);
    $scope.singleton = ReuseService;
  })
  .controller('ExampleTwoController', function($scope, ReuseService) {
    //We need do copy, because ReuseService is singleton 
    $scope.reusable = angular.copy(ReuseService);
    $scope.singleton = ReuseService;
  })
  .service('ReuseService', function() {
    return {
      varReuse: 'im not using yet',
      imReuseFunction: function(val) {
        this.varReuse = val;
      }
    }
  });

和 HTML

<div ng-app="ExampleApp">
  <div ng-controller="ExampleOneController">
    <h3>
      ExampleOneController
    </h3>
    <form name="ExampleForm">
      Reusable variable: {{reusable.varReuse}}
      <br>Reusable variable singleton: {{singleton.varReuse}}
      <br>
      <button ng-click="reusable.imReuseFunction('one')">
        Reuse me
      </button>
      <button ng-click="singleton.imReuseFunction('one')">
        Reuse me singleton
      </button>
    </form>

  </div>
  <hr>
  <div ng-controller="ExampleTwoController">
    <h3>
      ExampleTwoController
    </h3>
    <form name="ExampleForm">
      Reusable variable: {{reusable.varReuse}}
      <br>Reusable variable singleton: {{singleton.varReuse}}
      <br>
      <button ng-click="reusable.imReuseFunction('two')">
        Reuse me
      </button>
      <button ng-click="singleton.imReuseFunction('two')">
        Reuse me singleton
      </button>
    </form>

  </div>
</div>