ng-repeat 内的 Materialize 按钮不触发模态

Question

我正在为一个项目使用 materialize.js，我有一个 ng-repeat 元素，其中包含我的用户数组的内容：

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

标准按钮 <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> 放置在 ng-repeat 之外时可以使用，但每个用户都需要显示它才能打开编辑 window。但是，每次我将它放在重复指令中时，都不会调用 #modal1。

还有其他人运行遇到实体化模式触发按钮的问题吗？

编辑

输入directives.js

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

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

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>

模态 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-->

具体化依赖项：

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

Answer 1

我记得运行也遇到过这个问题。

基本上，您需要在 'ng-repeat' 完成后初始化模态框。我做了一些搜索，找到了这个 answer.

创建以下指令：

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

您的 HTML 需要如下所示：

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

然后，在您的控制器中添加以下内容：(Materialize modals)

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

ng-repeat 内的 Materialize 按钮不触发模态

Materialize button inside ng-repeat not triggering modal

materialize

angularjs-ng-repeat