angularjs - 为什么我无法在 AngularJS 的 mdDialog Controller 中访问 `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 的正确方法是什么？还有一个问题，我如何使用 controller as alias 语法？我在哪里写它？

Answer 1

作为@Claies提到，您可以在 $mdDialog.show(options) 的选项对象中直接使用 controllerAs 语法。

official doc (Dialog #3)它在评论中说的地方非常困惑:

Here we used ng-controller="GreetingController as vm" and $scope.vm === controller instance=""

但根本没有在示例中使用它。 (对于 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!";
}

在 Controller 中组合 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