如何使用AngularJS创建全局帮助框？

我的

body

标记中有一个

AppController

，它充当全局控制器。我还有一个

div

锚定在底部以显示更新帮助

---

当您将鼠标移到某个字段上时，我希望获取

数据提示

属性，并将其显示在

帮助div

中。如何使用AngularJS执行此操作？

您的控制器：

app.controller('AppController', function($scope){
    ...
    $scope.defaultHelpText = 'look here for help';
    $scope.helpText = $scope.defaultHelpText;
    ...
    $scope.helpElem1 = {text: 'this is important'};
    $scope.helpElem2 = {text: 'this is also important'};
    ....
});

<div class="help-text"> {{helpText}} </div>

<div class="hover-over-me" ng-mouseenter="helpText = helpElem1.text" ng-mouseleave="helpText = defaultHelpText">
    {{helpElem1.text}}
</div>

<div class="hover-over-me" ng-mouseenter="helpText = helpElem2.text" ng-mouseleave="helpText = defaultHelpText">
    {{helpElem2.text}}
</div>

底部的“帮助”

：

app.controller('AppController', function($scope){
    ...
    $scope.defaultHelpText = 'look here for help';
    $scope.helpText = $scope.defaultHelpText;
    ...
    $scope.helpElem1 = {text: 'this is important'};
    $scope.helpElem2 = {text: 'this is also important'};
    ....
});

<div class="help-text"> {{helpText}} </div>

<div class="hover-over-me" ng-mouseenter="helpText = helpElem1.text" ng-mouseleave="helpText = defaultHelpText">
    {{helpElem1.text}}
</div>

<div class="hover-over-me" ng-mouseenter="helpText = helpElem2.text" ng-mouseleave="helpText = defaultHelpText">
    {{helpElem2.text}}
</div>

{{helpText}

触发文本更新的任何元素：

app.controller('AppController', function($scope){
    ...
    $scope.defaultHelpText = 'look here for help';
    $scope.helpText = $scope.defaultHelpText;
    ...
    $scope.helpElem1 = {text: 'this is important'};
    $scope.helpElem2 = {text: 'this is also important'};
    ....
});

<div class="help-text"> {{helpText}} </div>

<div class="hover-over-me" ng-mouseenter="helpText = helpElem1.text" ng-mouseleave="helpText = defaultHelpText">
    {{helpElem1.text}}
</div>

<div class="hover-over-me" ng-mouseenter="helpText = helpElem2.text" ng-mouseleave="helpText = defaultHelpText">
    {{helpElem2.text}}
</div>

{{helpElem1.text}
{{helpElem2.text}

---

希望这能帮助您找到正确的方向。

我希望将帮助文本嵌入

div

，比如

。我该如何实现呢？如果您真的希望能够从元素的属性中提取数据，那么您必须编写自己的自定义

hint

指令。您是否可以将文本嵌入

ng mouseenter

属性而不是

数据提示

属性？