如何使用 Angular-materialize 从控制器打开模式答案

【问题标题】：How do I open a modal from a controller using Angular-materialize如何使用 Angular-materialize 从控制器打开模式
【发布时间】：2016-08-25 13:32:06
【问题描述】：

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

http://materializecss.com/modals.html

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

我正在尝试执行以下操作

用户点击按钮
控制器动作被触发，我们从 api 获取数据
向用户显示模态并显示返回的数据

我有以下按钮

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

【问题讨论】：

标签： angularjs modal-dialog materialize

【解决方案1】：

Angular-materialize 允许您在触发器中设置选项open。使用它来指定一个变量，当它为真时，将启动您的模态。最初在您的控制器中将其设置为 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>

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：