Is it possible to invoke a scope method in the template?

[beradrian]

Something like

<script id="tagTemplate" type="text/ng-template">
    <div>
    <span>{{$getDisplayText()}}</span>
    <button ng-click="showDetails(data)">More</button>
    </div>
</script>

[mbenford]

Sorry for not replying sooner.

That's not currently possible, but I've been thinking of implementing that feature in a future release.

[theBull]

+1

[beradrian]

So now you can use it as in my example or should I add $scope, like $scope.showDetails(data)?

[mbenford]

@beradrian You should add the $scopeprefix. I resisted naming it as "scope" because nowadays people rarely need to deal with scopes, but I couldn't come up with a better name. I welcome suggestions :)

[theBull]

To be clear

<script id="tagTemplate" type="text/ng-template">
    <div>
    <span>{{$getDisplayText()}}</span>
    <button ng-click="$scope.showDetails(data)">More</button>
    </div>
</script>

?

[vdsabev]

@mbenford are you planning a new release including this fix soon, or should we directly use the commit hash for now?

[mbenford]

@theBull Yes, your markup is correct. Take a look at this working plunker.

@vdsabev v3.1.1 has been released earlier today on all distribution channels. v3.1 had been released before, but don't use it because it's buggy.

[vdsabev]

Thanks, @mbenford, it works beautifully!

Something to note in our use case - we needed the event in the template of the <auto-complete></auto-complete> directive, but the template-scope attribute is set in the <tags-input></tags-input> directive.

Also, the autocomplete template click event bubbles up and the item gets added to the tags input list, unless the $event object is used to stop the propagation.

Example:

<tags-input template-scope="this">
  <auto-complete template="autocomplete-item-template"></auto-complete>
</tags-input>

<script type="text/ng-template" id="autocomplete-item-template">
  <div>
    <span ng-bind-html="$highlight($getDisplayText())"></span>
    <i class="fa fa-fw fa-trash" ng-click="$scope.deleteAutocompleteItem(data, $event)"></i>
  </div>
</script>

$scope.deleteAutocompleteItem = function (data, $event) {
  $event.stopPropagation(); // Prevent item from being added to the list
  ...
};

[Arunadevi]

Would be nice to reference this here: http://mbenford.github.io/ngTagsInput/documentation/api#tagsInput or http://mbenford.github.io/ngTagsInput/documentation/guides/custom-templates

[nishit-rspl]

Thanx @mbenford @vdsabev by using template-scope="this", I'm able to bind scope of that controller.