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

Question

我正在使用Materialise CSS和Angular-materialize指令：

http://materializecss.com/modals.html

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

我正在尝试执行以下操作

1. 用户点击按钮
2. 控制器动作被触发，我们从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']);

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

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时，将启动模态。最初在控制器中将其设置为false。

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

触发：

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

在控制器中：

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

Answer 2

在$scope.$apply()之后为$scope.openModal = true;工作

Answer 3

我也在与此斗争，但没有解决方案对我有用。我不得不改变html方面。

我的HTML：

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

在控制器中：

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

    $scope.openModal = true;

}

数据目标应与您的模态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>