Question

我正在尝试根据这篇文章创建一个工具提示

Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding

我成功创建了弹出式窗口，但无法将内容发送到我的popover.html

我将此添加到我的script.js

var app = angular.module('myApp', ['ui.bootstrap', 'ian.bootstrap']);

app.controller('myCtrl', function ($scope) {
  $scope.item = {
    title: 'Original Title',
    content:'content 1'  //newly added item
  };  
  $scope.text = 'Click me';
});

我希望在我的popover.html中显示它

<div class="popover-content">
     {{item.content}}
</div>

它没有显示任何内容。有人可以帮我吗？非常感谢！

我的傻瓜

http://plnkr.co/edit/5pBZ9qq79OPl2tGEeYYV?p=preview

Answer 1

您可以在ng-controller中添加div，然后像这样指定控制器名称：

<div class="popover-content" ng-controller='myCtrl'>
    {{item.content}}
</div>

Answer 2

在用例之前，创建自定义指令的基本语法。对于本页中的所有代码示例，我从angular-seed模板开始。从angular-seed骨架开始，很容易提取模型以开始实现自定义指令。

<html ngApp="myApp">

    ...

    <div my-first-directive></div>
    <script src="lib/angular/angular.js"></script>
    <script src="js/app.js"></script>
    <script src="js/directives.js"></script>

    ...

</html>

Answer 3

以下是您的最新工作 Plunkr

基本上你必须传递attr iantooltip-content与内容项的绑定，而不是原始文本，并在指令传递后在指令中隔离范围选项内容的绑定，如：

iantooltipContent: '='

只需更改appenToBody变量就可以了。

您应该阅读docs以获取更多有关Angular指令的信息：）

在我的案例中如何使用Angular绑定数据？

3 个答案: