angularJS控制器属性注入

时间:2017-06-29 00:45:11

标签: angularjs dependency-injection

是否可以在angularJS中使用属性注入?

方案
我知道这会起作用

app
    .module('myapp')
    .config(function($stateProvider) {
        $stateProvider.state('the-state', {
            url: '/the/url',
            templateUrl: 'view.html',
            controller: 'ctrl',
            controllerAs: 'vm',
            resolve: {
                'boolFlag': function(service){return service.getBoolean();}
            }
        });
    })
    .service('service', function(){
        this.getBoolean = function() {return ...};
    })
    .controller('ctrl', function(boolFlag) {
        this.boolFlag = boolFlag;

        this.execute = function(){...};
    });


<div ng-show="vm.boolFalg">
  simple dynamic content
</div>
<button type="button" ng-click="vm.execute()">Click Me</button>

但感觉漏水了。 boolFlag`仅在视图中用于显示/隐藏内容。有没有办法解析控制器并在控制器实例上设置boolFlag属性?我认为提供商或工厂是可行的方式,但我会绕圈试图理解它。

我认为它看起来像

app
    .module('myapp')
    .config(function($stateProvider) {
        $stateProvider.state('the-state', {
            url: '/the/url',
            templateUrl: 'view.html',
            controller: 'ctrl',
            controllerAs: 'vm',
        });
    })
    .provider('ctrlProvider', function(ctrlProvider, service) {
         var ctrl = ctrlProvider.$get/invoke/build/create();

         ctrl.boolFlag = service.getBoolean();

         return ctrl;
    })
    .service('service', function(){
        this.getBoolean = function() {return ...};
    })
    .controller('ctrl', function() {
        this.execute = function(){...};
    });

我也可能以错误的方式解决这个问题。许多控制器都需要boolFlag属性。也许它应该是$parentScope的一部分?但我不知道如何编码。

更新 我昨晚想的更多了。 boolFlag根本不需要与控制器相关联。它只需要成为范围的一部分。 $scope.boolFlag = service.getBoolean();

接下来的问题是,如何在没有控制器的情况下填充$ scope?

1 个答案:

答案 0 :(得分:0)

您可以使用factory来维护boolFlag的值,以便在控制器之间共享它。最好避免使用$ parentScope。 This解释了如何继续这样做。如果您最初需要设置factory的值,您也可以在主模块的app.config中使用它来设置其值。