使用jQuery添加ng-click事件

Question

使用jQuery添加ng-click事件

4

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

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的方式进行操作，现在我已经做到了以下几点。控制器与上述相同，并且我已经更新了模态框中的选项卡。

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

- SuperNinja

2

为什么需要使用jQuery来完成这个操作？你能展示一下你放置image_edit链接的HTML代码吗？如果它在ng-repeat中，你可以直接绑定到返回元素上的属性；如果它不在原始数据中，你可以在响应处理程序或使用拦截器中将其添加到数据中。通常情况下，在没有通过$compile服务运行的指令之外操纵DOM是不好的。 - shaunhusain

感谢@shaunhusain。 ng-click将根据单击的图库添加到模态框中。老实说，我正在使用jQuery作为支撑，因为我仍在学习Angular。 - SuperNinja

没问题，谢谢您提供一些细节。我认为还有一件事情缺失，那就是您在哪里定义了settings.id，并且在$http.post调用返回响应的时候它是否可用？ - shaunhusain

是的，您可以在特定图库的点击事件中获取settings.id参数。 - SuperNinja

2个回答

2

基本上，我想表达的是你可能想要实现这个目标：

<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=""
            ng-click="getGallery(image.galleryID)"
            >
        {{image.orgName}}
    </li>
</ul>

问题在于我不确定设置 ID 和特定图像的 galleryID 之间的关系。如果您可以在数据中设置此关系，使其自动绑定，那么您就处于更好的状态。

- shaunhusain

galleryID和settings.id是相同的。当我调用模态框时一切都很好，这里我的问题有点不清楚，抱歉。在编辑之前的选项卡允许上传更多的图像。因此，如果我在上传新图像后单击编辑选项卡，则需要再次调用$scope.getGallery，以便我拥有更新后的图像列表。 - SuperNinja

好的，如果你有两个不同的控制器并且想要在它们之间进行通信，你可以使用隔离作用域、使用事件或使用服务来进行通信，并在调用函数时保持更新。这三种解决方案都是可接受的，但根据你的情况可能效果更好或更差。这将是我第20次链接这个视频：http://www.youtube.com/watch?v=ZhfUv0spHCY 它有点长，但对于一个中级开发者来说提供了很好的覆盖范围。 - shaunhusain

就个人而言，我到目前为止主要依赖服务，因为这是我在AngularJS中学习处理控制器之间通信的第一种方法（通常我正在进行 $http调用，我想在其中共享数据，这时服务非常有意义）。然而在某些情况下，使用事件 $on $emit $broadcast 或对指令使用隔离作用域（scope:{bound:"=", pexpress:"&", str:"@"}）也很不错，关于这方面以及其他内容的好视频可以在这里找到：http://www.egghead.io/ 另外，出身于AS3背景的我知道事件可能会失控。 - shaunhusain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sylvain · Accepted Answer

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

如何强制Angular编译这个新添加的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