0

以前にこれが発生したことは知っていますが、正確にはこの方法ではなく、必要な変更を行うのに問題があります。

ギャラリーの一部として、最初は空で非表示の div があります。画像をクリックすると、div に入力されて表示されます。画像/コンテンツに加えて、いくつかのナビゲーション要素もあります。つまり、角度を再コンパイルする必要があるため、これらも動的に生成され、機能しません。移入する関数は次のとおりです。

    $scope.picturePop = function(picID){
    match = $.grep($scope.gallery, function(obj) { return obj.id == picID; });
    pic = match[0].image;
    title = match[0].title;
    desc = match[0].desc;
    closediv = "<div id=\"divClose\" class=\"floatRight\" ng-click=\"closeParent();\">Close</div>";
    navDiv = "";
    if(picID > 1){
        prev = picID - 1;
        navDiv += "<div id=\"picNav\" ng-click=\"picturePop(" + prev + ")\">Previous</div>";
    }

    if(picID < $scope.picCount){
        next = picID + 1;
        navDiv += "<div id=\"picNav\" ng-click=\"picturePop(" + next + ");\">Next</div>";
    }

    $('#innerPictureDisplay').html(closediv + "<br/><br/><img src=\"images/paintings/" + pic + "\" /><p><b>" + title + "</b><\p><p>" + desc + "</p>"+ navDiv);
    $('#outerPictureDisplay').css('display','block');
};

「CLOSE」とナビゲーション項目が機能するように、そのコードを「再コンパイル」するにはどうすればよいですか?

アップデート

だから、私は自分のアプローチを変更しましたが、明らかにまだ何かが欠けています:

私の新しいHTML：

        <div id="outerPictureDisplay" ng-show="picID > 0">
        <div id="innerPictureDisplay">
        <div id="divClose" class="floatRight" ng-click="picID = 0;">Close</div>
        <div id="picNav" ng-click="picturePop({{prevID}});" ng-show="picID > 1">Previous</div>
        <div id="picNav" ng-click="picturePop({{nextID}});" ng-show="picID < picCount">Next</div>
        <img src="images/paintings/{{thisPic.image}}" />
        <p>
        <b>{{thisPic.title}}</b>
        </p>
        <p>{{thisPic.desc}}</p>
        </div>
    </div>

私の新しい機能:

    $scope.picturePop = function(picID){
        match = $.grep($scope.gallery, function(obj) { return obj.id == picID; });
        $scope.thisPic = match[0];
        $scope.picID = picID;
        $scope.nextID = picID + 1;
        $scope.prevID = picID - 1;
        var $content =  $('#innerPictureDisplay');
        var scope =  $content.scope();
        $compile($content.contents())(scope);
};

写真をクリックすると、すべて正常に読み込まれますが、前または次をクリックすると、picID が null として登録されているため閉じます。私がチェックしたところ、数字は実際にコードに出力されていますが、角度をクリックしても数字が表示されません。それらは未定義として通過しています-一見コンパイルの問題です。提案されたリンクを使用しても、すべてをディレクティブとして実装しようとしましたが、役に立たなかったので、何かをしたに違いありません。

4

1 に答える 1

0

$compile次のように角度サービスを使用できます。

$compile("<a ng-click='myFunction()'>my html</a>")(scope);

そしてもちろん、どこにいても彼に注射しなければなりません。とにかく、神のために、このように DOM 操作を使用しないでください。ディレクティブを使用して、代わりにモデルからコンテンツをフィードする必要があります。

更新 1

ここにあるincunaのbindHtmlCompileディレクティブを使用することをお勧めします。

于 2016-01-04T19:00:14.237 に答える