How do I open a modal from a controller using Angular-materialize

materialize modal
react-materialize modal
materialize modal not working
materialize login modal
modal trigger
css modal
material modal css
modal-fixed footer

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

http://materializecss.com/modals.html

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

I am trying to do the following

  1. User clicks button
  2. Controller action gets fired and we go get data from an api
  3. Modal is displayed to user and data returned is displayed

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

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

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.

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.

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

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

How do I open a modal from a controller using Angular-materialize, I am using Materialize CSS and the Angular-materialize directives: http://​materializecss.com/modals.html http://krescruz.github.io/angular-materialize/#​modals I  AngularJS Modal Popup open and close from controller. In this Post We Will Explain About is AngularJS Modal Popup open and close from controller With Example and Demo.

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

Is there a way to trigger a modal from controller? · Issue #114 , I need to be able to trigger a modal to show from controller code. You can see that with Materialize, one can open a modal with the jQuery function . implemented anything in angular-materialize that calls that function. The example controller passes the modal id from the view, but it could also be set directly in the controller like this: ModalService.Open('my-custom-modal'); The view then calls the functions exposed by the viewmodel in the usual way:

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

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

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

Angularjs directives for Materialize CSS Framework, In the below example, you can change the header of the modal through the input field. Show Modal. Modal header. Open from controller  Opening & Closing Angular 6 Modal Dialogs. To open and close (show/hide) a modal dialog you need to use an instance of the ModalService by importing it into your controller, injecting it into the constructor and calling this.modalService.open() and this.modalService.close(), e.g:

ng-materialize, Use dialogs sparingly because they are interruptive in nature. $modal.open(​options) controller - controller for the modal instance. You need a modal trigger, like the below. The trigger should have the modal directive, and the href attribute must point to the ID of the modal structure. The modal strcture should be structured just like in materialize. In the below example, you can change the header of the modal through the input field.

Angular 2/5, LAST UPDATED: NOVEMBER 29 2017 - Simple Modal Window in from your controller to identify which modal you want to open/close. I really like materialize and the fact that it makes it easier to make a decent looking web app (I'm not very good at design) having to use the browser-default select box breaks the look of using materialize for the forms I have.

Materialize modal close event, JQuery, Angular, React and Vue versions. js--> <script type="text/javascript" class​=" modal service from your controller to identify which modal you want to open/​close. Materialize Css Modal Popup are used widely in any application so it is​  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.