Question

*编辑：Mike指出了一个类型的问题。我想要解决的真正问题包括带有cluetip的模板。看到这个修订过的plnkr： http://plnkr.co/edit/UGH3cV3z9MrqA4eyPjLc?p=preview

我确定这与摘要循环和jquery插件cluetip有关，但我不知道在模板中使数据绑定工作需要哪些步骤。我把这个简单的例子放在plnkr中以表明我的意思。

http://plnkr.co/edit/YW7AsTEuJh2ixqSUJpld?p=preview

有问题的代码是：

头＆GT; Cluetip - AngularJS

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.cluetip.js"></script>

  <script type="application/javascript">
    $(function() {
      $('a.title').cluetip({
        splitTitle: '|'
      });
    });
  </script>
</head>

<body ng-app>

  <input ng-model="somedata" placeholder="Some Data">
  <br/>{{ somedata }}

  <hr/>
  <br/>
  <a class="title" href="#" title="This is the title| someData: {{ someData }} .|In this case, the delimiter is a pipe">In Line Text</a>

</body>

Answer 1

这里有几个问题......

首先，您没有控制器来管理它，因此标签创建的范围对于工具提示标题中的somedata引用是不可见的。要纠正此问题，您需要引用控制器：

<body ng-controller="MainCtrl">

并在该控制器中设置somedata范围值：

  $scope.somedata = 'somedata';

其次，你在标题引用中有一个小错字（在某些数据中有一个大写“D”）：

  title="This is the title| someData: {{ someData }} .|In this case, the delimiter is a pipe"

应该是

  title="This is the title| someData: {{ somedata }} .|In this case, the delimiter is a pipe"

最后，似乎jQuery cluetip代码正在创建一个值的副本，因此它不是动态的。实际上，它可能在初始化时设置了一次DOM对象，并且再也没有引用“title”属性 - 只是隐藏和显示创建的内容。因此，更改“title”属性的值似乎被忽略。

我将Plnkr与上述更改分开（包括引用控制器现在所在的script.js文件）：http://plnkr.co/edit/hzW6AtJBj4zPPM405n5Y?p=preview

注意一切正常;但是，随着somedata值的变化，cluetip不会动态变化。我在Plnkr的第一个下面复制了一个锚点，但改变了类，所以cluetip不会附加，这是一个标准的工具提示。你会看到这个工具提示会动态更新 - 使用相同的输入框和一些数据。

除此之外，我认为您必须找到一种方法来触发和更新cluetip初始化或使用不同的小部件。除此之外，你可能会更好地探索一个原生角度指令，这样你就不会遇到这类问题。也许像http://angular-ui.github.io/bootstrap/#/tooltip

AngularJS数据绑定表达式在工具提示插件模板中不起作用

1 个答案: