I am using the Typeahead directive from the UI Bootstrap framework. I am using this directive inside of another directive. My outer directive is defined like this:
.directive('myDirective', function () {
return {
restrict:'E',
transclude: true,
scope: {
showLinks: '=?',
query: '='
},
templateUrl: '/directives/my-directive.html',
controller: function ($scope) {
if (angular.isUndefined($scope.showLinks)) {
$scope.showLinks = true;
console.log('show links? ' + $scope.showLinks);
}
}
};
});
my-directive.html looks like this:
<div style="width:100%;">
<span>{{showLinks}}</span> <!-- renders just fine -->
<input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
typeahead="option as option.Name for option in getLocation($viewValue)"
typeahead-min-length="3" typeahead-template-url="location.html" />
<script type="text/ng-template" id="location.html">
{{showLinks}} <!-- Never renders -->
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</script>
</div>
I'm calling my directive like this:
<my-directive show-links="true" />
I need to use the value of showLinks inside of the template I'm using for the typeahead. For some reason though, it is not beings passed into the template. I believe it has something to do with scoping. I've come to this conclusion by binding the value into the UI as shown above. The value for showLinks appears just fine in my template. However, it does not appear in the template of the typeahead instance in my directive.
What am I doing wrong? I feel like I am so close. Yet, I've been working on this all day.
Thank you for any help you can provide!
The typehead directive is creating its own isolated scope thus you can't access any properties which are not part of this scope. Basically you can access only these properties:
scope:{
index:'=',
match:'=',
query:'='
}
but you can access the model property of the mach match.model so in your example you can add the showLinks variable as a argument to the getLocation method and map its value to option object:
<input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
typeahead="option as option.Name for option in getLocation($viewValue, showLinks)"
typeahead-min-length="3" typeahead-template-url="location.html" />
template
<script type="text/ng-template" id="location.html">
{{match.model.showLinks}} <!-- the show linLinks property is mapped inside getLocation method -->
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</script>
getLocation example:
$scope.getLocation = function(viewValue, showLinks)
{
var locations = [];
// code to fill locations
// extend each location (option) object with showLinks data
for (int i=0; i<locations.length; i++)
{
var location = locations[i];
location.showLinks = showLinks;
}
return locations;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments