来自 Bootstrap-UI Typeahead 模板的访问控制器范围答案

【问题标题】：access controller scope from Bootstrap-UI Typeahead template来自 Bootstrap-UI Typeahead 模板的访问控制器范围
【发布时间】：2017-04-27 05:13:16
【问题描述】：

我无法使用 ui-typeahead 从自定义模板内部调用控制器函数：

<input typeahead="val for val in autoComplete($viewValue)"
  typeahead-template-url="searchAutocompleteTpl.html"  
  ng-model="query"/>

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span ng-repeat="eqp in match.model.equipment"/>
    <a href="" ng-click="showItem(eqp.model)">
      found in: {{eqp.model}}
    </a>
</script>

问题是模板中好像没有控制器的作用域：

showItem(eqp.model)

永远不会被调用。我也试过：

$parent.showItem(eqp.model)

无济于事。

那我怎样才能在控制器的作用域上调用函数/值呢？

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

我遇到了同样的问题，并查看了typeahead code on github，看看是否可以提供任何线索。似乎有几个指令涉及创建建议列表，每个指令都有自己的子范围。

换句话说，你的$parent.showItem(eqp.model) 是一个很好的尝试，但你没有达到足够的水平。对我有用的是：$parent.$parent.$parent.showItem(eqp.model)

【讨论】：

谢谢，但你知道为什么吗？以及我们在哪里可以清楚地看到范围的结构。
我花了 4 $parent 才到达原来的范围。
这取决于您使用它的方式和位置。 typeahead 清楚地在某处引入了一个孤立的范围，这意味着您不会从自己的父范围继承原型。这就是为什么您必须使用 $parent 的原因，即使在孤立的范围内，它也由 angular 填充。如果您在自己的指令中使用 typeahead 也定义了一个隔离范围，那么您需要向上 $parent 链 4 次才能到达您的基本范围。当然，此时您可能想要开始重新考虑您的代码。隔离作用域的意义在于它可以重复使用，因为它不依赖于父作用域。
@Awakening：typeahead 有几个嵌套的子范围，通常一个用于弹出窗口，一个用于该下拉列表中的每个结果。您可以使用 AngularJS Batarang 在运行时检查您的作用域结构。它是 Google Chrome 开发者工具的扩展。

【解决方案2】：

我也有同样的问题。我不确定，但它的工作原理。

您可以使用双 $parent 代替单。

例如$parent.$parent.showItem(eqp.model)

【讨论】：

【解决方案3】：

您的问题的解决方案是在您的模板控制器范围内启动一个对象，如下所示：

$scope.typeaheadObject = {
   query : '',
}

现在在您的表单中，您需要更改您的 ng-model：

ng-model="typeaheadObject.query'

如果您不在其中一个控制器中重新启动它，这将在您的所有控制器中创建对象 typeaheadObject。因此，当您想要访问此控制器之一中的对象内容时，您只需执行以下操作：

console.log($scope.typeaheadObject.query)

这是 angularJs 中的经典问题。如果变量是对象中的库存，您只能访问和修改父范围

最后你必须使用'.'在你的 ng 模型中。这将允许您的 ui-bootstrap 模块和您自己的模块与对象共享它们的范围。

我只是在 plunker 上做了一个示例，以确保您充分理解这个问题。

http://plnkr.co/edit/4YWNMagm571Gk2DrCERX?p=preview

祝你有美好的一天:)

【讨论】：

【解决方案4】：

添加 4 个父母后，它对我有用。 $parent.$parent.$parent.$parent.

【讨论】：