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

如何使该代码“重新编译”以便“关闭”和导航项工作？

更新

所以，我改变了我的方法，但我显然仍然缺少一些东西：

我的新 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 注册为空。我检查了，数字确实打印在代码中，但是 angular 在点击时看不到它们。它们以未定义的形式出现 - 似乎是编译问题。我尝试将其全部实现为指令，即使使用建议的链接，但我一定做了一些事情，因为它没有帮助。

4

1 回答 1

0

您可以像这样使用角度服务$compile：

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

当然，无论您身在何处，都必须给他注射。无论如何，看在上帝的份上，不要以这种方式使用 DOM 操作。您应该使用指令并从模型中提供内容。

更新 1

我建议使用您可以在此处找到的incuna指令。bindHtmlCompile

于 2016-01-04T19:00:14.237 回答