Materialize button inside ng-repeat not triggering modal

Question

I am using materialize.js for a project and I have an ng-repeat element with contents of my user array:

         `<div id="userObj" ng-repeat="user in allUsers">`

The standard button <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> works when placed outside of the ng-repeat, but it needs to be present for every user in order to open an edit window. However, every time I put it inside the repeat directive the #modal1 is not called.

Has anyone else ran into problems with the materialize moda-trigger button?

EDITS

IN directives.js

    app.directive('repeatDone', function() {
       return function(scope, element, attrs) {
           if (scope.$last) { // all are rendered
               scope.$eval(attrs.repeatDone);
           }
       }
    });

In app.js:

var myPosts = $firebaseArray(ref);
$scope.allUsers = allUsers;

$scope.initModals = function() {
$('.modal-trigger').leanModal(); // Initialize the modals
}


//EDIT User



   $scope.editPost = function(id) {

    $scope.update = function() {
      var fb = new Firebase("https://<DATASOURCE>.firebaseio.com/AllUsers/" + $scope.postToUpdate.$id);
      var user = $firebaseObject(fb);
      user.Name = $scope.postToUpdate.Name;
      user.Lastname = $scope.postToUpdate.Lastname;
      user.Bio = $scope.postToUpdate.Bio;
      user.$save().then(function(ref) {
          $('#editModal').modal('hide');
          console.log($scope.postToUpdate.Title);
        }, function(error) {
        console.log("Error:", error);
    });
}

The post ng-repeat

<div ng-controller="postController">
           <div class="list-group" id="userObj"  ng-repeat="user in allUsers" repeat-done="initModals()">
             <h3>{{ user.Name }}</h3>
             <h5>{{user.LastName}}</h5>
             <div ng-bind-html="post.Bio">{{user.Bio}}</div>
             <button class="waves-effect waves-light btn modal-trigger" ng-click="editPost(post.$id)">EDIT</button>
             <!-- Button trigger modal -->

           </div>

MODAL WINDOW

<!--material modal-->
            <div class="modal" id="editModal">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                  </div>
                  <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="speaker-name" class="control-label">Speaker:</label>
                            <input type="text" class="form-control" id="title" ng-model="postToUpdate.Name">
                        </div>
                        <div class="form-group">
                            <label for="speaker-lastname" class="control-label">Speaker Last Name:</label>
                            <textarea class="form-control" id="message-text" ng-model="postToUpdate.Lastname"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">Biography:</label>
                            <textarea class="form-control" id="message-text" ng-model="postToUpdate.Bio"></textarea>
                        </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" ng-click="update()" class="btn btn-primary">Save changes</button>
                  </div>
              </div>
            </div>
            <!--//material modal-->

Materialize dependecies:

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

 <script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

I remember running into this problem as well.

Basically, you need to initialize the modals once 'ng-repeat' has finished. I did a bit of searching and found this answer.

Create the following directive:

 yourApp.directive('repeatDone', function() {
    return function(scope, element, attrs) {
        if (scope.$last) { // all are rendered
            scope.$eval(attrs.repeatDone);
        }
    }
});

Your HTML will need to look like this:

<div id="userObj" ng-repeat="user in allUsers" repeat-done="initModals()">

Then, in your controller add the following: (Materialize modals)

$scope.initModals = function() {
    $('.modal-trigger').leanModal(); // Initialize the modals
}

edited May 23 '17 at 11:52

Community

1
1

answered Oct 06 '15 at 13:24

Kieran Chadwick

116
1
1
6

Hey thanks for responding to this. It's been a lot of detective work in my behalf. I have added your code (see edits above) and now something is happening but only the Modal overlay is triggered, not the modal itself. Is there something I am forgetting? – HGB Oct 06 '15 at 14:17
@HGB In your original post you were using an tag pointing to "modal1" (href="#modal1"). The – Kieran Chadwick Oct 06 '15 at 14:29
Ops!! I changed from the old boostrap styles not realizing it would stop working. This has resolved the problem and I now won't have to revert my entire project back to bootstrap. If you have not done it already, I may link to your post in the Gihub Materialized issues. Thanks for this! – HGB Oct 06 '15 at 15:06

Materialize button inside ng-repeat not triggering modal

1 Answers1