angularjs - 使用 jQuery 添加 ng-click 事件

Question

作为 Angularjs 的新手，我需要一些帮助来解决这个问题。我正在尝试将 ng-click="getGallery(57)"添加到模态选项卡。通过 jQuery 添加不是问题，但是我意识到当我这样做时，Angular 没有编译新添加的 ng-click。我有一个简单的 Controller

function imageGalleryCtrl ($scope, $http) {

    //get gallery info on click
    $scope.getGallery = function(id)
    {
        $http.post('/beta/images/get_images',{'id': id}).success(function(data)
    {
        $scope.images = data.thisGal_images;
        $scope.images.galID = id;
    });
    };

}

我使用 jQuery 将 ng-click 添加到元素

//Edit image tab to use angularjs
$('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')');

如何强制 Angular 编译这个新添加的 ng-click？

谢谢!

HTML 模态:

这是单击库名称时调用的模式。

<div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"></button>
        <h3>Create New Gallery</h3>
    </div>
    <div class="modal-body">
            <ul id="myTab" class="nav nav-tabs">
                <li id="image_home" class="">
                    <a href="#home" data-toggle="tab">Home</a>
                </li>
                <li id="image_upload" class="">
                    <a href="#upload" data-toggle="tab">Upload Image Gallery</a>
                </li>
                <li id="image_edit" class="">
                    <a href="#edit" data-toggle="tab">Edit Image Gallery</a>
                </li>
            </ul>

            <div id="myTabContent" class="tab-content">

                <div class="tab-pane fade in" id="home">
                    <?php include('create.php'); ?>
                </div>

                <div class="tab-pane fade" id="upload">
                    <?php include('upload.php'); ?>
                </div>

                <div class="tab-pane fade" id="edit">
                    <div class="span9">
                <ul id="imageSort" class="gallery-container">
                <li ng-repeat="image in images">
                <img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt="">
                {{image.orgName}}
                </li>
                 </ul>
               </div><!-- /span9 -->
                </div><!-- /row -->
                </div>

            </div>

    </div><!-- /modal-body -->

    <div class="modal-footer">
        <a href="javascript:;" class="btn" data-dismiss="modal">Close</a>
        <a href="javascript:;" id="next" class="btn btn-primary">Next</a>
    </div>

</div>

更新

所以真的试图以 Angular 的方式做到这一点，经过一些研究，我在这里。
Controller 与上面相同，我更新了模态上的选项卡，如下所示。

<div class="modal-body">
            <ul id="myTab" class="nav nav-tabs">
                <li id="image_home" class="">
                    <a href="#home" data-toggle="tab">Home</a>
                </li>
                <li id="image_upload" class="">
                    <a href="#upload" data-toggle="tab">Upload Image Gallery</a>
                </li>
                <li id="image_edit" class="">
                    <a ng-click="getGallery(57)" href="#edit" data-toggle="tab">Edit Image Gallery</a>
                </li>
            </ul>

如果我对 ng-click 进行硬编码，则选项卡会按预期更新。我想要实现的是，当调用模态时，(#image_edit a) 获得定义的 ng-click="getGallery(id)。我需要告诉 Angular 再次查看 ng-click 以获取 id。

Answer 1

虽然我也认为你应该尝试寻找另一种方法，但你的问题的答案

How do I force Angular to compile this newly added ng-click?

是

// remove and reinsert the element to force angular
// to forget about the current element
$('#button1').replaceWith($('#button1'));

// change ng-click
$('#button1').attr('ng-click','exec2()');

// compile the element
$compile($('#button1'))($scope);

请参阅此工作示例: http://plnkr.co/edit/SgvQzaY0TyFHD1Mf0c3F?p=preview