angularjs - 如何使用 Angular-materialize 从 Controller 打开模态

Question

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

http://materializecss.com/modals.html

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

我正在尝试执行以下操作

1. 用户点击按钮
2. Controller 操作被触发，我们从 API 获取数据
3. 向用户显示模态框并显示返回的数据

我有以下按钮

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

和模态

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

我的 JS 中有以下内容

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

我如何从我的 Controller 调用 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);
        });
});

Answer 1

Angular-materialize 允许您在触发器中设置选项open。使用它来指定一个变量，当该变量为 true 时，将启动您的模式。最初在 Controller 中将其设置为 false。

使用 ng-click 调用 Controller 中的函数，该函数从 API 获取数据，然后在成功时将 open 变量设置为 true。

触发器:

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

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

编辑:您可以在触发器中设置其他两个选项，ready 和 complete

HTML

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

JS

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