为什么我无法在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的选项对象中使用$mdDialog.show(options)语法。

official doc (Dialog #3)令人困惑，其评论中说：

  

这里我们使用ng-controller =＆＃34; GreetingController作为vm＆＃34;和$ scope.vm === controller instance =＆＃34;＆＃34;

但根本不在样本中使用它。 （对于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!";
}

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

参考：Official Document for ngController

Answer 2

我假设你有一个像这样的ng模块：

var app = angular.module('demo-app',[]);

您可以像这样定义控制器：

app.controller('posterVoteController',($scope, $mdDialog, poster) {
    $scope.test = "TEST!";  //use $scope is right way
}

并使用它：

           $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
                }
            });