어떻게 내가 구체화의 CSS와 사용하고

Question

-실현 각도를 사용하여 컨트롤러에서 모달를 열 않는 지시를 각도를-실현 :

http://materializecss.com/modals.html

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

을 나는 다음과 같은

을 위해 노력하고 있어요

1. 사용자 클릭 버튼
2. 컨트롤러 동작이 중지되고 g 하는 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

각도-구체화 당신이 당신의 트리거에서 옵션 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> 

날 근무 3,516,

JS

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

Answer 2

$scope.openModal = true;

후