AngularJS ControllerAs 语法和控制器注入变量

Posted 2023-02-23

【中文标题】AngularJS ControllerAs 语法和控制器注入变量

【英文标题】：AngularJS ControllerAs syntax and controller injected variables

【发布时间】：2015-11-07 13:56:56

【问题描述】：

我正在编写指令并尝试坚持使用John Papa style guide。所以我也决定跳上ControllerAs 语法马车，我有一个小指令，如下所示：

(function() 
    angular
        .module('htApp')
        .directive('newsletterSignup', newsletter_signup);

    function newsletter_signup($http) 
        var directive = 
            templateUrl: '../whatever.tpl.html',
            restrict: 'EA',
            controller : controller,
            controllerAs: 'vm',
            bindToController: true
        ;

        return directive;

        controller.$inject = ['$http'];

        function controller($http) 
            var vm = this;
            // $http is here ... all is good, but I don't need it

            function doSubmit(form) 
                // I need $http here, but it is null
                debugger;
            ;

            vm.doSubmit = doSubmit;
        
    
)();

这是一个通讯注册服务。我将不得不做一个 HTTP 请求，因此我将它注入到控制器中。一切都很好 - 但从模板调用 vm.doSubmit(--formname-here--) 函数导致我无法找到 $http 服务。

所以我的问题是：如何从doSubmit() 函数访问注入的$http？

编辑

我将包含视图代码 - 但不用担心 - 管道工程：

<button class="btn btn-yellow" ng-click="vm.doSubmit(newsletterform)" translate>
    footer.ok_button_text
</button>

编辑 2

事实证明，@Tek 是对的 - 代码有效。我认为我没有看到它的原因是因为（我认为）Chrome 中的 JS 运行时优化了 $http，当它知道它不会被调用时。

此代码运行良好。我认为这是因为运行时在console.log() 函数调用中预先考虑了$http 的使用。但是 - 如果我删除该行，我会得到这个（这就是我首先遇到这个问题的原因）：

请注意，我注释掉了console.log - 因此doSubmit() 调用从不使用$http。现在 - 当我在控制台中调用 $http 时 - 它没有定义。

【参考方案1】：

问题出在这里：

return directive;

controller.$inject = ['$http'];

function controller($http) 
...

controller 函数是在执行return 语句时定义的。但是controller.$inject 永远不会被定义。此外，newsletter_signup 函数缺少对应的$inject。

This 不会是minified。而this 将是minified。

【讨论】：

谢谢，但我认为这不是问题所在。代码可以正常工作 - 我认为由于运行时优化，我得到了 NullRef 异常。我会更新我的帖子来演示一下。

$inject 适用于代码压缩。缩小代码，看看会发生什么。

谢谢 - 但就像我说的 - 连接 $http 工作正常。也缩小了。不过，请查看我更新的问题 - 我偶然发现了一个不错的怪癖。

我猜您的问题与 Chrome 调试器有关，而不是 Angular DI。尽管如此，您的代码与 JP 样式指南不匹配，答案解决了这个问题。我已对其进行了更新以使其更加清晰。

好点 - 我忽略了这一点。非常感谢您指出：我的代码确实没有正确缩小。

【参考方案2】：

您的示例运行良好：example。

但就我而言，John Papa 对 Angular 风格的看法很奇怪，我更喜欢 this style guide。

【讨论】：

这很奇怪 - 我自己无法让它工作。有趣的风格指南——我今天早上刚读了这个人的博客。使用 John Papa's 的原因是因为我听说它可以更轻松地过渡到 Angular v2。

我发现了问题所在——您可能对我更新后的问题感兴趣。