在 Angular 中编译动态生成的按钮

Question

我正在尝试在 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>

Answer 1

Angular 假定传递给 deleteRow 的值是表达式的一部分，因此它会检查与 username 的值匹配的键的范围。通过将连接的用户名字符串括在引号中来更改 ng-click 表达式。 E. G. deleteRow(\''+ username + '\')

Answer 2

建议使用 directive。

为此，您需要根据您提供的代码执行以下操作：

定义指令 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: '='
    }
  }
}

更新 html，即从原始控制器调用指令并保存按钮的新部分。

触发您原来的控制器中的指令。（例如 $scope.buttonSwitchedOn），当它为真时，angular 将自动加载并且运行你的指令

在 Angular 中编译动态生成的按钮

Compiling dynamically generated buttons in Angular

javascript

angularjs

angularjs-compile