javascript - ng-click 用户定义的带有外部模板的 $mdDialog 不工作

Question

第一次使用 $mdDialog 我习惯于使用外部 HTML 模板创建对话框。

到目前为止，一切顺利，...它可以打开模板，但 html 中的 ng-click 将不再起作用。

我找不到原因。

mdDialog 在 userController 中被这样调用:

<md-icon
        layout="row"
        flex md-font-set="material-icons"
        class="active"
        ng-click="vm.showMenu($event)">
    menu
</md-icon>

在userController中打开$mdDialog的方法:

vm.showMenu = function showMenu(ev){

    $mdDialog.show({
        controller: MenuDialogController,
        templateUrl: 'app/components/head/user/menu.dialog.html',
        parent: angular.element($document.body),
        targetEvent: ev,
        clickOutsideToClose:true,
        fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
    })
        .then(function(answer) {
            $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
            $scope.status = 'You cancelled the dialog.';
        });
};

这是对话框的对话框 Controller ，按钮不起作用:

angular
    .module('trax')
    .controller('MenuDialogController', MenuDialogController);

function MenuDialogController() {

    var vm = this;

    vm.close = function close(){
        alert('close clicked');
    }

    vm.ok = function ok(){
        alert('ok clicked');
    }

}

这是 dialogController 的 html 代码:

<md-dialog aria-label="User Menu">
    <form ng-cloak>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>User Menu</h2>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="vm.close($event)">
                    <md-icon md-font-set="material-icons">close</md-icon>
                </md-button>
            </div>
        </md-toolbar>

        <md-dialog-content>
            <div class="md-dialog-content">
                <h2>Dialog Title</h2>
                <p>Dialog Text....</p>
                <p ng-click="vm.test($event)">test</p>
            </div>
        </md-dialog-content>

        <md-dialog-actions layout="row">
            <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
                More on Wikipedia
            </md-button>
            <span flex></span>
            <md-button ng-click="vm.close($event)">
                cancel
            </md-button>
            <md-button ng-click="vm.ok($event)">
                ok
            </md-button>
        </md-dialog-actions>
    </form>
</md-dialog>

所有 ng-clicks 都不起作用!

有什么提示吗？

Answer 1

要保持代码不变，您必须在之后添加

var vm = this;

与

var vm = this;
$scope.vm = vm;

这样你就可以在你的模板中使用它了。

另一种方法是直接在$scope中声明方法为

$scope.close = function() { ... };
$scope.ok = function() { ... };

第一种方法等于在$mdDialog.show辅助方法中声明controllerAs: "vm"