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.';
        });
};

这是对话框的对话框控制器，按钮不起作用：

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>

None 的 ng-clicks 有效！

有什么提示吗？

Answer 1

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

function MenuDialogController() {

    var vm = this;

    //Here change vm to $scope
    $scope.close = function close(){
        alert('close clicked');
    }

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

}

您必须将函数分配给对话控制器的 $scope

Answer 2

看来您的设置略有偏差。事实上，您似乎希望将范围传递到此对话框中。从 $mdDialog docs 的示例中，我能够找到以下内容...

// Dialog #3 - Demonstrate use of ControllerAs and passing $scope to dialog
//             Here we used ng-controller="GreetingController as vm" and
//             $scope.vm === <controller instance="">

您似乎需要修改您的实现以匹配此模式。尝试以下...

$mdDialog.show({
  controller: MenuDialogController,
  templateUrl: 'app/components/head/user/menu.dialog.html',
  parent: angular.element($document.body),
  targetEvent: ev,
  clickOutsideToClose:true,
  fullscreen: $scope.customFullscreen,
  scope: $scope,         // use parent scope in template
  preserveScope: true,   // do not forget this if use parent scope
}).then(function(answer) {
  $scope.status = 'You said the information was "' + answer + '".';
}, function() {
  $scope.status = 'You cancelled the dialog.';
});

注意指定的 scope 和 preserveScope 选项。

// Since MenuDialogController is instantiated with ControllerAs syntax
// AND we are passing the parent '$scope' to the dialog, we MUST
// use 'vm.<xxx>' in the template markup

Answer 3

要保持​​代码不变，您必须在

之后添加

var vm = this;

和

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

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

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

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

第一个方法等于在$mdDialog.show辅助方法

中声明controllerAs: "vm"