Question

我有一个动态网页，该网页是由用户创建的先前条目生成的。这意味着要查看他们可以选择的可能输入列表，然后将它们附加到指令中的html。

因此我的ng-tags全部工作，我需要通过$ compile运行这一大块html，这样它们仍然有效。这一直很好，我现在的问题是我正在尝试使用自定义指令或jquery类来执行更复杂的字段，这些字段在通过$ compile之后拒绝正常运行。

例如 -

<div data-j-signature="obj.Test" data-pen-color="#0000ff" data-line-color="#00000" style="border:1px #000 solid;"></div><div class="col-sm-11">

这使用了一个很好用的名为JSignature的角度库，当它放在我的网页中时会正常工作，但在编译过程中却不行。

我不一定在寻找特定问题的答案，因为我觉得这将是我尝试添加的更多字段的常量问题。有没有人对如何解决这个问题有任何一般性的建议？有没有我没看到的替代方案？

这是我的HTML -

<div ng-repeat="Question in Questions">
    <question-type></question-type>
</div>

这是我的指令在将很多html字符串组合在一起后最终做的重要部分 -

var compiledHtml = $compile(stringOfHtml)(scope);
element.append(compiledHtml);

Answer 1

这使用了一个jquery datepicker，并且可以正常工作，但是在我的指令中被追加然后编译时不会。

这确实是你问题的核心。你不能指望jQuery插件在Angular应用程序中正常工作，仅仅因为它们的生命周期不是很好的重合。我会更好地解释。

当你运行应用程序时，一些带有指令和绑定Angular的HTML会被Angular解析和编译。我很好。此时你的jQuery插件甚至可能正确初始化，因为它们通常只需要渲染DOM。但是，当您附加新编译的动态HTML时会发生什么？ Angular会很好地接听它，因为你打电话给$compile。但是jQuery可能会失去同步而永远不会重新初始化插件。

这就是为什么你不应该像我们习惯的那样使用jQuery的主要原因。理想情况下，jQuery的使用（以及一般的DOM操作）应仅限于自定义指令。这是唯一可以100％确定Angular和jQuery在适当的时候更新/初始化它们的方法。

那么......你需要一个日期选择器吗？大！有许多Angular指令可用（例如，Angular UI datepicker），只需将jQuery插件包装到链接函数中，从而使其与Angular工作流和摘要周期兼容。

Answer 2

app.controller('mainController', function($scope, $http, $compile){
$scope.updateData = function(){
    $http({
      method: "POST",
      url: 'abc.com',
      data: angular.element('#form').serialize(),
      headers : {'Content-Type': 'application/x-www-form-urlencoded'}
    }).
    then(function(result){
        var temp = $compile(result.data)($scope);
        angular.element('#showhtml').html(temp);
    }).catch(function(response){
    }).finally(function() {
    });
}
});

AngularJS：使用$ compile将html附加到网页

2 个答案: