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

还有其他人遇到了物化模式触发按钮的问题吗？

EDITS

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

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

实现家属：

<!-- 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内的物化按钮不会触发模态

1 个答案: