Как инициализировать materalizecss в угловых

Question

Как инициализировать materalizecss в угловых

0

Итак, название kinda говорит все это...
Я хочу использовать материализую модальный, созданный угловой, только проблема, которую я получил, это не будет правильно инициализироваться. Кто-то получил разрешение?

Угловое, что дает мне объект со значениями.

$http.get("../functions/getList.php")
            .success(function (response) {
                $scope.lists = response;
            });

HTML, где я использую modal от materalizecss

<div id="modal1" class="modal">
                    <div class="modal-content">
                        <h4>Add Item to list: <!--list name hier--></h4>
                        <form>
                            <div class="row">
                                <div class="input-field col s12">
                                    <label for="item-name">Item Name</label>
                                    <input type="text" name="item-name" ng-model="itemName" id="item-name">
                                </div>
                            </div>

                            <div class="row">
                                <div class="input-field col s12">
                                    <label for="item-description">Item Description</label>
                                    <input type="text" name="item-description" ng-model="itemDescription" id="item-description">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat" ng-click="createItem()">Add item</a>
                    </div>
                </div>

getList.php

$smt = $dbh->prepare("SELECT lists.name, lists.description, lists.deadline, lists.id FROM users INNER JOIN lists ON (users.id = lists.user_id) AND users.id = ?");
    $smt->execute(array(
        $user
    ));
    $result = $smt->fetchAll(PDO::FETCH_ASSOC);
    $json = json_encode($result);
    print_r($json);

Edsardio 29 окт. 2015, в 21:30

Источник

0

нам нужна дополнительная информация о проблеме, как выглядит ваш код?
AlexN 29 окт. 2015, в 19:45
0

@AlexN только что добавил мой код, извините, что не добавил его.
Edsardio 29 окт. 2015, в 20:52

Теги:

angularjs

materialize

1 ответ

Ещё вопросы

нам нужна дополнительная информация о проблеме, как выглядит ваш код?
@AlexN только что добавил мой код, извините, что не добавил его.

gnath · Answer 1 · 2017-04-05T00-46-00.000Z

Все, что вам нужно сделать, это:

Первый:

Добавьте этот скрипт в контроллер, чтобы инициализировать материализованный модальный

$(document).ready(function(){
   $('.modal').modal();
});

Пример:

var myApp = angular.module('myApp',[]);

myApp.controller('TestController', ['$scope', function($scope) {

  //initialize materialize modal
  $(document).ready(function(){
      $('.modal').modal();
   });

}]);

Далее: (необязательно)

Используйте эту строку, если хотите программно вызвать модель

$('#modal1').modal('open'); //when you want to open modals programatically

Пример:

$http.get("../functions/getList.php")
        .success(function (response) {
            $scope.lists = response;
            $('#modal1').modal('open');
        });

Далее: (необязательно)

Используйте "цель данных", если вы хотите отображать модальный щелчок на кнопке.. при использовании "ng-route", потому что href не будет работать, потому что это повлияет на ng-route и просто начнет перенаправление страниц

data-target="modal1" //instead of href="#modal1"

Пример:

<button data-target="modal1" class="btn">Display My Modal</button>

Демо здесь

var myApp = angular.module('myApp',[]);


var testController = function($scope, $http){

    $(document).ready(function(){
          $('.modal').modal();
       });
       
    $scope.clicked = function(){
     $('#modal1').modal('open');
    }  

}

myApp.controller("testController",testController);

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   
      
<script data-require="angular.js@~1.2.2" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>

<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
          


          

<div ng-app ng-controller="testController">


<button data-target="modal1" class="btn">Click Me</button>

<button ng-click="clicked()" class="btn">ng-Click</button>


<div id="modal1" class="modal">
                    <div class="modal-content">
                        <h4>My Modal</h4>
                       
                    </div>
                    <div class="modal-footer">
                        <a class=" modal-action modal-close waves-effect waves-green btn-flat" ng-click="createItem()">close</a>
                    </div>
                </div>


</div>