angularjs-ng-repeat - ng-repeat 内的物化按钮不触发模式

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 之外时可以工作，但它需要为每个用户提供才能打开编辑窗口。但是，每次我将其放入重复指令中时，都不会调用 #modal1。

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

编辑

IN 指令.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);
    });
}

帖子 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>

模态窗口

<!--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()">

然后，在您的 Controller 中添加以下内容:(Materialize modals)

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