0

Angular でボタンを動的に生成しようとしています。クリックすると、そのボタンはdeleteRow()関数を呼び出してユーザー名を渡す必要があります。適切なユーザー名がコントローラーに正常に渡され、結果のボタン コードが適切に生成されたように見えます。ただし、それらのボタンは関数に渡さundefinedれてしまいdeleteRow()ます。これは私の使い方の問題です$compileか？

validationApp.controller('usersController', function ($scope, $compile, $http, $timeout){
    $(document).on("click", ".open-confirm-dialog", function () {
        var username = $(this).data('id');
        var btnHtml = '<button class="btn btn-danger" data-title="Delete" ng-click="deleteRow(' + username + ')">DELETE</button>';
        var temp = $compile(btnHtml)($scope);
        angular.element(document.getElementById('deleteButton-dynamic')).append(temp);
    });

    $scope.deleteRow = function(username){
        alert(username); //This shows 'undefined' in the pop-up
        var request = $http({
        method: "post",
        url: "scripts/delete.php",
        data: { un: username },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });

    request.success(function() { });
    location.reload();
};

HTMLは次のとおりです。

<div class="row" ng-controller="usersController">
    <div class="table-responsive col-md-12" ng-show="filteredItems > 0">
    <table id="users" class="table table-bordred table-striped">
        <thead>
            <th ng-click="sort_by('username');">Username:&nbsp;<i class="glyphicon glyphicon-sort"></i></th>
            <th ng-click="sort_by('submitted_info');">Submitted Info.:&nbsp;<i class="glyphicon glyphicon-sort"></i></th>
        </thead>
        <tbody>
            <tr ng-repeat="data in filtered = (list | orderBy : predicate :reverse)">
                <td>{{data.username}}</td>
                <td>{{data.submitted_info}}</td>
                <td><a href="#confirmModal" class="open-confirm-dialog" data-toggle="modal" data-id='{{data.username}}'><span class="glyphicon glyphicon-trash"></span></a></td>
            </tr>
        </tbody>
    </table>

    </div>
        <div class="col-md-12" ng-show="filteredItems == 0">
            <div class="col-md-12">
                <h4>No customers found</h4>
            </div>
        </div>
        <div class="col-md-12" ng-show="filteredItems > 0">
        <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>
        </div>

        <!-- Confirm Modal -->
        <div id="confirmModal" user-id="" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmModal" aria-hidden="true">
            <div class="modal-dialog">
                <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">Confirm Delete</h4>
                    </div>
                <div class="modal-body">
                Are you sure you want to delete this user from the database?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>     
                <span id="deleteButton-dynamic"></span>
                <!--Working HardCoded Button
                <button class="btn btn-danger" data-title="Delete" ng-click="deleteRow('user1')">WorkingButton</button>
                -->
            </div>
        </div>
    </div>
</div>
4

2 に答える 2

0

ディレクティブの使用を提案します。

これを行うには、指定したコードに基づいて次のことを行う必要があります。

  1. ディレクティブ javascript 自体を定義する

// 最初にディレクティブ コントローラーを定義します 

function dynamicButton ($scope, $http){
    $scope.deleteRow = function(){
        // here $scope.username is defined based on the value from the parent controller
    };
});

// これによりディレクティブが angular に登録されます

validationApp.directive(dynamicButton.name, function(){
  return {
    controller: dynamicButton.name,
    restrict: 'E',
    templateUrl: 'pathtoyourhtmlpartial',
    scope: {
      username: '='
    }
  }
}
  1. HTML を更新します。つまり、元のコントローラーからディレクティブを呼び出し、ボタンの新しいパーシャルを保存します。

  1. 元のコントローラーでディレクティブをトリガーします。(例: $scope.buttonSwitchedOn)、それが true の場合、Angular は自動的にディレクティブをロードして実行します
于 2015-04-14T18:47:54.170 に答える