Angular js绑定标题属性

Posted 2023-05-09

【中文标题】Angular js绑定标题属性

【英文标题】：Angular js binding on title attribute

【发布时间】：2017-07-06 21:54:53

【问题描述】：

在尝试使用 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 的值，但这似乎也不起作用。

【问题讨论】：

How do you get AngularJS to bind to the title attribute of an A tag?的可能重复

你能再显示一些代码吗？特别是您实现 jQuery UI 消息框的方式。

@Canastro 我在做这个之前浏览了那个帖子。我已经尝试过 ng-attr-title 但还是不行

【参考方案1】：

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

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

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

你在哪里调用 $scope.errorDialog？

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

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

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

【讨论】：

$scope.errorDialog 从 controller.js 文件中的另一个函数调用。由于显示了 errorMessage 数据，因此正确调用了 errorDialog 函数。但我无法在 index.html 文件中使用 AngularJs 动态设置标题属性

我真正想做的是在错误对话框中动态显示title属性