Angular js绑定标题属性

Question

在尝试使用 Angular JS 将以下变量绑定到 HTML 属性时，我需要帮助。在我的控制器文件中，我有这个

controller.js

$scope.errorDialog = function(errorTitle, errorMessage){
      $scope.errorTitle = errorTitle;
      $scope.errorMessage = errorMessage;
      $("#dialog-confirm").dialog('open');
}

errorTitle 和 errorMessage 参数都在另一个函数中设置。

在我的 html 文件中，我有这个错误消息框（使用 Jquery UI）

abc.html

<div title="{{errorTitle}}" id="dialog-confirm" >
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>{{errorMessage}}</p>
</div>

由于某种原因，标题没有显示。我试过把它改成 ng-attr-title="{{errorTitle}}" 但这也不起作用。我还尝试在 title 属性中使用函数并返回 errorTitle 的值，但这似乎也不起作用。

Answer 1

我可以在这里看到两个可能的问题：

1. 您确定要与对话框共享控制器的 $scope 吗？

如果您的控制器无法访问创建对话框的 div，这意味着它不是控制器根元素的子节点子树中的 DOM 节点，它将不会显示属性（并且不会给出错误）

1. 你在哪里调用 $scope.errorDialog？

如果您在 $digest 循环之外运行该调用，则可以通过在设置属性后调用 $scope.$apply 来解决此问题。虽然这不是最好的解决方案，但最好以以下方式包装此函数的调用

$scope.$apply(function() {
    $scope.errorDialog('title', 'message');
})

这将允许 AngularJS 最终拦截在执行 $scope.errorDialog 时发生的错误