Область управления доступом из шаблона типа Bootstrap-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>

Проблема заключается в том, что в шаблоне отсутствует область управления:

showItem(eqp.model)

никогда не вызывается. Я также пробовал:

$parent.showItem(eqp.model)

безрезультатно.

Как я могу вызвать функцию/значение в области контроллера тогда?

Ответ 1

Я столкнулся с той же проблемой и посмотрел на код typeahead на github, чтобы узнать, может ли это предложить какие-либо подсказки. Похоже, что существует несколько директив, связанных с созданием списка предложений, и каждый из них получает свою собственную область действия.

Другими словами, ваш $parent.showItem(eqp.model) был хорошей попыткой, но вы не поднялись достаточно уровней. Что для меня работало: $parent.$parent.$parent.showItem(eqp.model)

Ответ 2

Решение вашей проблемы состоит в том, чтобы инициировать объект в области вашего контроллера шаблона следующим образом:

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

теперь в вашей форме вам нужно будет изменить свою ng-модель с помощью

ng-model="typeaheadObject.query'

Это создаст объект typeaheadObject во всем вашем контроллере, если вы не перезапустите его в одном из ваших контроллеров. Поэтому, когда вы захотите получить доступ к содержимому объекта в одном из этих контроллеров, вам просто нужно сделать, например:

console.log($scope.typeaheadObject.query)

Это классическая проблема в angularJs. Вы можете получить доступ и изменить родительскую область, если переменная является запасом в объекте

Наконец, вы должны использовать '.' в вашей ng-модели. Это позволит вашему модулю ui-bootstrap и вашему собственному модулю поделиться своей областью с объектом.

Я просто сделал пример на plunker, чтобы убедиться, что вы хорошо понимаете проблему.

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

Хорошего дня:)

Ответ 3

У меня тоже такая же проблема. Я не уверен, но его работа.

Вы можете использовать double $parent вместо одиночного.

например. $parent.$parent.showItem(eqp.model)

Ответ 4

Это сработало для меня после добавления 4 родителей. $ Родителя. $Родителя. $Родителя. $Предок.