为什么我无法在AngularJS中的mdDialog控制器中访问`this`的属性？

Question

代码如下:

function showVote(ev, poster) {
            $mdDialog.show({
                // var parentDOM = document.getElementById("poster-page");
                parent: angular.element(document.getElementById("poster-page")),
                controller: posterVoteController,
                templateUrl: 'view/poster_vote_tmpl.html',
                targetEvent: ev,
                locals: {
                    poster: poster
                }
            });
        }

function posterVoteController($scope, $mdDialog, poster) {
    var vm = this;
    vm.test = "TEST!";
}

当我访问它时{{posterVoteController.test}},没有任何东西出现.只有当我写作$scope.test = "TEST!"和访问{{test}}它才会起作用.

在这种情况下编写控制器的正确方法是什么？还有一个问题,我该如何使用controller as alias语法？我在哪里写的？

Answer 1

正如@Claies所提到的,您可以controllerAs直接在options对象中使用语法$mdDialog.show(options).

在官方文档(对话3#)是相当混乱的地方在它的评论,它说:

这里我们使用ng-controller ="GreetingController as vm"和$ scope.vm === controller instance =""

但根本不在样本中使用它.(For angular-material@1.0.3).

以下是您可以使用的2个工作示例:

明确的controllerAs语法

angular.module('poster', []);

angular
    .module('poster')
    .controller('MainController', MainController);

angular
    .module('poster')
    .controller('PostVoteController', PostVoteController);

// This is the main controller for you app where you will bind showVote to
funciton MainController($scope) {
    var vm = this;

    vm.showVote = showVote;

    // ...

    function showVote(ev, poster) {
        $mdDialog.show({        

            // ...

            controller: 'PosterVoteController',

            // This is where the magic happens
            controllerAs: 'vm',
            templateUrl: 'view/poster_vote_tmpl.html',
            targetEvent: ev,
            locals: {
                poster: poster
            }

            // ...
        });
    }

    // ...    
}

// This is the controller used for your $mdDialog
function PosterVoteController($scope, poster) {
    var vm = this;
    vm.test = "TEST!";
}

as控制器中的组合语法

angular.module('poster', []);

angular
    .module('poster')
    .controller('MainController', MainController);

angular
    .module('poster')
    .controller('PostVoteController', PostVoteController);

// This is the main controller for you app where you will bind showVote to
funciton MainController($scope) {
    var vm = this;

    vm.showVote = showVote;

    // ...

    function showVote(ev, poster) {
        $mdDialog.show({        

            // ...

            // Just like in Angular 1.3, you can use controllerAs syntax like this
            controller: 'PosterVoteController as vm',            
            templateUrl: 'view/poster_vote_tmpl.html',
            targetEvent: ev,
            locals: {
                poster: poster
            }

            // ...
        });
    }

    // ...    
}

// This is the controller used for your $mdDialog
function PosterVoteController($scope, poster) {
    var vm = this;
    vm.test = "TEST!";
}

两种方式完全相同.它只是编码风格的选择.

参考:ngController的官方文件