Question

我在服务器上已经生成了一些元素，我试图让angularjs在该元素上注册click事件，我该怎么做？

我的span元素是：

<span id="SpanIdHere" class="data-field"></span>

我为每个单击的字段都有一个jquery事件处理程序，因为我不知道哪种方式可以挂钩到click事件，因为服务器为我生成了这个html。

$("#report-html-content .data-field").click(function () {
    var id = $(this).attr("id");
   openFieldWithData(id);
});

这是我在角度控制器中的代码，它将打开模态覆盖。

function openFieldWithData(selection) {
    console.debug(selection);
    $scope.SelectedField.Name = selection
    $("#template-detail").addClass("open");
};

我想要做的是在UI中点击每个字段时显示模态叠加。

此代码完全有效，除非调用jquery click事件，只有当我关闭模式时，字段的名称才会出现在html中。

  <div id="template-detail" class="overlay-report">
    <div class="inner">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h6>
                    Template field
                    <button ng-click="closePanel()" data-id="btnCloseOverlay" type="button" class="close pull-right">×</button>
                </h6>
            </div>
            <div class="panel-body">
                {{SelectedField.Name}}
            </div>
        </div>
    </div>
</div>

Answer 1

附加事件处理程序中的代码生活在“Angular之外”，因此您需要手动告诉Angular触发摘要循环。否则，在其他东西触发之前，不会反映更改。

您可以使用$apply：

$ apply（）用于从外部执行角度表达式角度框架。（例如，来自浏览器DOM事件， setTimeout，XHR或第三方库）。因为我们正在呼唤我们需要执行适当范围生命周期的角度框架异常处理，执行手表。

如果仅从Angular外部调用openFieldWithData，您可以：

function openFieldWithData(selection) {
  $scope.$apply(function() {
    $scope.SelectedField.Name = selection
    $("#template-detail").addClass("open");
  });
}

否则你需要把它放在事件处理程序中：

$(".data-field").click(function() {

  var element = $(this);
  var scope = element.scope();

  scope.$apply(function() {
    openFieldWithData(element.attr("id"));
  });
});

将angularjs绑定到元素不起作用

1 个答案: