如何使用Angular-materialize从控制器打开一个模态

I am using Materialize CSS and the Angular-materialize directives:

我正在使用物化CSS和Angular-materialize指令:

http://materializecss.com/modals.html

http://materializecss.com/modals.html

http://krescruz.github.io/angular-materialize/#modals

http://krescruz.github.io/angular-materialize/情态动词

I am trying to do the following

我正在尝试做下面的事情

1. User clicks button
2. 用户点击按钮
3. Controller action gets fired and we go get data from an api
4. 控制器动作被触发，我们从api获取数据
5. Modal is displayed to user and data returned is displayed
6. 模式显示给用户，返回的数据显示出来

I have the following button

我有下面的按钮

<a href="#MyModal" modal class="my-modal-trigger waves-effect waves-green btn right"Show Data/a>

and modal

和模态

<div id="MyModal" class="modal">
    <div class="modal-content center">
        <div class="row">
            <div class="row left">
                <div class="card blue-grey darken-1">
                    <div class="card-content white-text">
                        <span class="card-title">Data</span>
                    </div>
                    <div>
                        <ul class="collection">
                            //loop the data
                        </ul>
                    </div>
                </div>
                <a  class="modal-action modal-close waves-effect waves-green btn">Close</a>
            </div>
        </div>
    </div>
</div>

and i have the following in my JS

在我的JS中有以下内容

var app = angular.module("MyApp", ['ngRoute', 'ui.materialize']);

How can i call a controller method to pop up the modal and fill it with data, from my controller

如何调用控制器方法弹出模态并从控制器中填充数据

app.controller('mainController', function ($scope, $location, $http, AppConfig) {

    var params = { some stuff}

    $http({
        method: 'POST',
        url: myURL,
        headers: {
            'Content-Type': 'text/html',
            'Accept': 'application/json'
        },
        params: params
    })
        .success(function (data) {
            //pop up the modal and show the data
            Materialize.toast('Awesome, we got the data', 4000);
        })
        .error(function (status) {
            Materialize.toast('Bad stuff happened', 4000);
        });
});

3 个解决方案

#1

Angular-materialize lets you set an option open in your trigger. Use it to specify a variable that, when true, will launch your modal. Set it to false initially in your controller.

Angular-materialize允许您在触发器中设置一个选项。使用它指定一个变量，当为true时，将启动您的模态。首先在控制器中设置为false。

Use ng-click to call a function in your controller that fetches data from your API then sets the open variable to true on success.

使用ng-click在控制器中调用一个函数，该函数从API获取数据，然后将open变量设置为true。

Trigger:

触发:

<a href="#MyModal" class="btn" modal open="openModal" 
    ng-click="getDataOpenModal()">Show Data</a>

In Controller:

控制器:

$scope.openModal = false;
$scope.getDataOpenModal = function() {
    $http({
        method: 'POST',
        url: '/myUrl',
        headers: {
            'Content-Type': 'text/html',
            'Accept': 'application/json'
        },
        params: params
    })
    .success(function(data) {
        $scope.data = data;
        $scope.openModal = true;
        Materialize.toast('Awesome, we got the data', 4000);
    })
    .error(function(status) {
        Materialize.toast('Bad stuff happened', 4000);
    });
}

EDIT: There are two other options you can set in your trigger, ready and complete

编辑:你可以在你的触发器中设置另外两个选项，准备好并完成

HTML

HTML

<a href="#MyModal" class="btn" modal open="openModal"
    ready="readyCallback()" complete="completeCallback()"
    ng-click="getDataOpenModal()">Show Data</a>

JS

JS

$scope.readyCallback = function() {
    Materialize.toast("Modal ready", 4000);
}
$scope.completeCallback = function() {
    Materialize.toast("Modal complete", 4000);
}

#2

Worked for me with $scope.$apply() after $scope.openModal = true;

$scope为我工作。$scope后$apply()。openModal = true;

#3

I was fighting with this too, but no solution worked for me. I had to change html side.

我也在与这个斗争，但没有解决方案对我有效。我必须改变html的一面。

My html:

我的html:

<a href="" data-target='log_detail' modal ng-click="get_info_log()"><i class="zmdi zmdi-eye"></i></a>

In controller:

控制器:

$scope.openModal = false
$scope.get_info_log = function(){  

    $scope.openModal = true;

}

Data-target should match your modal id:

数据目标应匹配您的模态id:

!-- Modal Structure-->
<div id="log_detail" class="modal modal-fixed-footer setup-modal">
        <div class="modal-content">                  
            </div>
        </div>
        <div class="modal-footer">
            <a class=" modal-action modal-close waves-effect waves-light btn">Close</a>
        </div>
    </div>