带有 ES6 控制器的 Angular 行为异常

Question

这是一个糟糕的标题。我意识到。那是因为我不完全确定如何问这个问题。我有两个基本相同的类，行为只是 一点点 有点不同，在状态配置中对应的 controllerAs: 'vm' 它们每个的行为也不同，还有一个令人困惑的“这个方法可以是静态的”警告来自 Webstorm 的其中一个，而不是另一个。

index.html：

<div ui-view="main"></div>
<div ui-view="portfolio"></div>

app.js

// this file contains only the module setter with all the
// dependencies, as well as the $stateProvider config and
// any actions that occur when the app runs

'use strict';

angular.module('necApp', ['dep1', 'dep2', 'etc'])

    .config(['$urlRouterProvider', '$locationProvider', '$animateProvider', Config])
    .run(['$rootScope', '$state', Run]);

function Config(params) { /* do stuff */ }
function Run(params) { /* do stuff */ }

ma​​in.js

use strict';

import { MainController } from './main.controller';

angular.module('myApp')
    .controller('MainController', MainController)
    .config(['$stateProvider', Config]);

function Config($stateProvider)
{
    $stateProvider

    .state('main',
    {
        url: '/',
        views: {
            'main': {
                templateUrl: 'app/main/main.html',
                // OF NOTE: I have access to the controller as 'vm' in the view
                // regardless of whether I include the next two lines
                controller: MainController,
                controllerAs: 'vm'
            }
        }

    });
}

ma​​in.html

<!-- 
     again, this expression is evaluated whether or not I include
     the `controller` and `controllerAs` properties in my $state config 
-->
<h1> {{ vm.result }} </h1>

ma​​in.controller.js

// OF NOTE: when I DO include the `controller` property in the $state config
// for the main route, this controller is registered and instantiated twice
'use strict';

export class MainController
{
    constructor($http)
    {
        /* @ngInject */
        angular.extend(this, {
            $http: $http,
            result: ''
        });

        this.Init();
    }

    Init()
    {
        this.$http.get('/endpoint').then(res =>
        {
            this.result = res.data;
        });
    }
}

portfolio.js

use strict';

import { PortfolioController } from './portfolio.controller';

angular.module('necApp')
    .controller('PortfolioController', PortfolioController)
    .config(['$stateProvider', Config]);

function Config($stateProvider)
{
    $stateProvider

    .state('portfolio',
    {
        url: '/portfolio',
        views: {
            'portfolio': {
                templateUrl: 'app/portfolio/views/portfolio.html',
                // OF NOTE: I do NOT have access to the controller as 'vm'
                // in the view in this case without the next two lines
                controller: PortfolioController,
                controllerAs: 'vm'
            }
        }
    });
}

portfolio.html

<!-- this is NOT evaluated without the `controller` and `controllerAs` properties in the $state config -->
<h1> {{ someExpression }} </h1>

portfolio.controller.js

'use strict';

export class PortfolioController
{
    constructor()
    {
        angular.extend(this, {

            someExpression: 'Testing . . .'
        });

        this.Init();
    }

    // OF NOTE: Webstorm warns me that this method can be static, even though
    // 1) that breaks it and 2) I do NOT get that warning in MainController
    Init()
    {
        // works as expected
        console.log('initializing PortfolioController.');
    }
}

一如既往，我非常期待您的想法和cmets。

Answer 1

好吧，在其他人浪费自己宝贵的时间之前，事实证明我只是个笨蛋。或者健忘。我发现我写的一个被遗忘且未使用的指令出于某种原因使用MainController 作为“vm”。天哪。

虽然：我仍然有 Webstorm 警告我 PortfolioController.Init() 可以是静态的，而我在 MainController.Init() 上没有收到该警告。所以这仍然是一个谜，我猜。