从Bootstrap-UI预输入模板访问控制器范围

I am unable to call a controller function from inside a custom-template with ui-typeahead:

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

The problem is that the controller's scope seems to be absent in the template:

问题是，模板中似乎没有控制器的范围:

showItem(eqp.model)

showItem(eqp.model)

is never called. I have also tried with:

从来都不是。我也尝试过:

$parent.showItem(eqp.model)

parent.showItem美元(eqp.model)

to no avail.

都无济于事。

How can I call a function/value on the controller's scope then?

那么如何调用控制器作用域上的函数/值呢?

4 个解决方案

#1

I ran into the same problem and had a look at the typeahead code on github to see if that might offer any clues. It appears that there are several directives involved in the creation of the suggestions list and each gets its own child scope.

我遇到了同样的问题，并查看了github上的预输入代码，看看这是否能提供一些线索。似乎在创建建议列表时涉及到几个指令，每个指令都有自己的子作用域。

In other words, your $parent.showItem(eqp.model) was a good attempt, but you didn't go up enough levels. What worked for me was: $parent.$parent.$parent.showItem(eqp.model)

换句话说，你的$parent.showItem(eqp.model)是一个很好的尝试，但是你没有提升足够的层次。对我起作用的是:$parent、$parent、$ parents . showitem (eqp.model)

#2

I also have same problem. I'm not sure but its working.

我也有同样的问题。我不确定，但它起作用了。

You can use double $parent instead of single.

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

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

例如父母。parent.showItem美元(eqp.model)

#3

The solution of your problem is to initiate an object in your template controller scope like this:

问题的解决方案是在模板控制器范围内初始化一个对象，如下所示:

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

now in your form you will need to change your ng-model with:

现在在你的表格中，你需要改变你的ng模型:

ng-model="typeaheadObject.query'

This will create the object typeaheadObject in all your controller if you don't re-initiate it in one of your controller. So when you will want to access to the content of the object in one of this controller you will just have to do for example:

这将在您的所有控制器中创建对象typeaheadObject，如果您不在其中一个控制器中重新初始化它。所以当你想要访问这个控制器中对象的内容时你只需要做例如:

console.log($scope.typeaheadObject.query)

This is a classical issue in angularJs. You only can access and modify a parent scope if the variable is stock in an object

这是angularJs中的一个经典问题。如果变量位于对象中，则只能访问和修改父范围

Finally you have to use a '.' in your ng-model. This will permit your ui-bootstrap module and your own module to share their scope with the object.

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

I just did an example on plunker to be sure you understand well the issue.

我刚刚举了一个关于普兰克的例子，以确保你能很好地理解这个问题。

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

Have a good day :)

祝你度过愉快的一天

#4

It worked for me after adding 4 parents. $parent.$parent.$parent.$parent.

在增加了4个父母之后，我觉得这个方法很有效。父母。父母美元。父母。父母美元。

#1