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 + ')');

この新しく追加された ng-click を Angular に強制的にコンパイルさせるにはどうすればよいですか?

ありがとう！

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) を取得することです。ID について ng-click をもう一度調べるように Angular に指示する必要があります。

4

2 に答える 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>

問題は、特定の画像の settings.id と galleryID の関係がわからないことです。この関係をデータに設定して、自動的にバインドすることができれば、より良い状態になります。

于 2013-07-24T16:44:46.653 に答える