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

The code is as follows:

代码如下:

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!";
}

And when I access it like {{posterVoteController.test}}, nothing appears. Only if when I write as $scope.test = "TEST!" and access {{test}} would it work.

当我像{{posterVoteController.test}}那样访问它时,什么都没有出现。只有当我写为$ scope.test =“TEST!”时并访问{{test}}它会起作用吗。

What is the correct way to write the controller in this case? And one more question, how can I use the controller as alias syntax? Where do I write it?

在这种情况下编写控制器的正确方法是什么?还有一个问题,我如何将控制器用作别名语法?我在哪里写的?

2 个解决方案

#1

As @Claies mentioned, you may use controllerAs syntax directly in options object for $mdDialog.show(options).

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

The official doc (Dialog #3) is pretty confusing where in its comment it says:

官方文档(Dialog#3)令人困惑,其评论中说:

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

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

but not using it in the sample at all. (For angular-material@1.0.3).

但根本不在样本中使用它。 (对于angular-material@1.0.3)。

---

Here are 2 working examples you may use:

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

Explicitly controllerAs syntax

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!";
}

Combined as syntax in controller

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!";
}

Two ways are exactly the same. It's just a choice of coding style.

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

Reference: Official Document for ngController

参考:ngController的官方文件

#2

I assume you have a ng module like this:

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

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

you can define controller like this:

你可以像这样定义控制器:

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

And use it like :

并使用它像:

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