14

我无法使用 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)

无济于事。

那么如何在控制器的范围内调用函数/值呢？

4

4 回答 4

16

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

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

于 2013-10-09T11:01:39.463 回答
2

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

您可以使用双$parent而不是单。

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

于 2016-07-14T06:22:37.153 回答
1

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

于 2017-04-26T21:13:16.747 回答
1

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

$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

祝你有美好的一天 ：）

于 2015-07-30T15:25:33.937 回答