AngularJS数据绑定表达式在工具提示插件模板内不工作_Angularjs

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

angularjs

AngularJS数据绑定表达式在工具提示插件模板内不工作,angularjs,Angularjs,*编辑：Mike指出了一个类型的问题。我想要解决的真正问题包括一个带有cluetip的模板。见本修订plnkr：我确信这与摘要循环和jquery插件cluetip有关，但我不知道在模板中实现数据绑定需要哪些步骤。我把这个简单的例子放在plnkr中，来说明我的意思有关守则如下：头> Cluetip-AngularJS <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">

*编辑：Mike指出了一个类型的问题。我想要解决的真正问题包括一个带有cluetip的模板。见本修订plnkr：

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

有关守则如下：

头> 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>


$（函数（）{
$（'a.title'）.cluetip({
拆分标题：“|”
});
});

{{somedata}

这里有几个问题

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

<body ng-controller="MainCtrl">

  $scope.somedata = 'somedata';

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

应该是

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

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

我在这里用上面的更改（包括引用控制器现在所在的script.js文件）派生了一个Plnkr：

注意所有的工作；但是，cluetip不会随着somedata值的变化而动态变化。我复制了Plnkr中第一个锚点下面的锚点，但是更改了类，这样cluetip就不会附着，这是一个标准的工具提示。您将看到此工具提示确实会动态更新——使用相同的输入框和somedata

除上述内容外，我认为您必须找到一种方法来触发和更新cluetip初始化，或者使用不同的小部件。除此之外，您可能更适合为此探索本机angular指令，这样您就不会遇到此类问题。也许类似于

谢谢迈克。打字错误总是要了我的命。谢谢你找到它。单向数据绑定实际上是可以的，但我真正的问题（我简化得太多）是我在cluetip中使用了数据模板。请看这个plnkr：我已经看了很多angular ui，它是一个非常精简的cluetip版本。我使用了cluetip提供的许多功能，若并没有这些功能，它就并没有多大价值。我没有技能来添加我需要的内容。这与最初的问题完全不同。在这种情况下，Angular根本看不到外部文件；它由cluetip直接加载。根据您将其外部化的原因，您可以探索其他方法，例如ng include，以允许内容位于外部文件中。但是，您可能必须在那里有整个标记定义（并且仍然使用title=”“语法）。谢谢，我将作为一个新问题重新发布。我有一个很大的网站，上面有“会话详细信息”（工具提示），我正在将其从jquery重写为angular。我还没有看到任何悬停在角上的效果这么好。

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