Question

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

  <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.
    ...
  };

如果我省略了工具提示指令，则代码可以正常工作。使用currentTag未定义的$ scope会发生什么？我该如何解决这个问题，以便上述工作？

Answer 1

你需要：

NG-模型=＆＃34;的 $父 .currentTag＆＃34;

angular-ui boostrap常见问题解答在"My input elements stop working when I place a tooltip / popover on it"部分中解决了这一特定问题。

大概是指scope behavior in angular < 1.2.0，常见问题解答声明（强调添加）：

这是一个范围问题。在当前版本的AngularJS中，每个DOM元素只能有一个范围。 [...] 目前解决此问题的最佳方法是在ngModel中为一个表达前缀父范围

您只需按照best practice guideline to "always have a '.' in your ng-models"即可解决问题;您需要通过实际绑定到父级中的值来解决角度范围限制。

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

Answer 2

回到关于角度范围的RTFM之后，我偶然发现了video这给了我答案。

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

ng-model="whateverYourCurrentModelIs.currentTag"

应该在控制器中相应地访问。

ui.bootstrap工具提示和输入元素中的ng-model不能很好地结合在一起？

2 个答案: