UI.Bootstrap工具提示和输入元素中的ng-model不能很好地协同工作？

Question

我正在尝试创建一个带有工具提示的输入元素，并将一个函数绑定到输入按键事件。这些功能中的每一个都可以单独工作，但不能组合使用。下面是标记：

  <input type="text"
    tooltip="tooltip text" 
    tooltip-placement="top"
    tooltip-trigger="mouseover"
    ng-model="currentTag" 
    ng-keypress="addTag($event)" />

和控制器相关部分：

  $scope.addTag = function($event) {
    if($event.keyCode !== 13) return;
    console.log($scope.currentTag);     <---- currentTag is undefined here.
    ...
  };

如果我省略工具提示指令，代码工作正常。使当前标签未定义的$scope会发生什么情况？我该如何解决此问题以使上述工作？

Answer 1

你需要有：

ng-model=">$parent.currentTag">

---

angular-ui boostrap 常见问题解答在"当我在其上放置工具提示/弹出框时，我的输入元素停止工作"部分中解决了此特定问题。

大概是指角度<1.2.0 中的范围行为，FAQ 指出(强调添加(：

这是一个范围界定问题。在当前版本的 AngularJS 中，每个 DOM 元素可以有一个且只有一个作用域。 [...] 目前解决此问题的最佳选择是在 ngModel 中的表达式前面加上父作用域

你不能仅仅通过遵循最佳实践指南来修复它，"在你的ng模型中总是有一个'.";你需要通过实际绑定到父级中的值来解决角度范围限制。

不用担心，当前范围也会通过从父级继承获得相同的值。因此，绑定到$parent.currentTag后，您将能够将其称为$scope.currentTag

Answer 2

回到RTFM关于角度示波器的内容后，我偶然发现了这个视频，它给了我答案。

简而言之，上面的模板ng模型应该是

ng-model="whateverYourCurrentModelIs.currentTag"

并应在控制器中进行相应的访问。