作为
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.
解决方法
基本上我所要做的就是你想要实现这个目标：
<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>
问题是我不确定settings.id和特定图像的galleryID之间的关系.如果你可以在数据中设置这种关系,那么它就会自动绑定你的状态.
