Question

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

到目前为止，这么好，...它的工作模板可以打开，但在HTML中的ng-click不再工作。

我找不到它的原因。

在userController中调用mdDialog，如下所示：

<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>

没有任何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');
    }

}

您必须将func分配给对话框控制器的$ 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() { ... };

第一种方法等于在controllerAs: "vm"辅助方法

中声明$mdDialog.show

单击用户定义的$ mdDialog与外部模板不起作用

3 个答案: