Question

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

无济于事。

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

Answer 1

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

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

Answer 2

我也有同样的问题。我不确定它的工作情况。

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

e.g。 $parent.$parent.showItem(eqp.model)

Answer 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

祝你有个美好的一天：）

Answer 4

在加入4位父母后，它对我有用。 $母体。$母体。$母体。$父

从Bootstrap-UI Typeahead模板访问控制器范围

4 个答案: