Last active
December 17, 2015 23:39
-
-
Save i8ramin/5690826 to your computer and use it in GitHub Desktop.
Trying to get twitter's typeahead.js to play nicely with angular js templates ... and failing.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.controller('SearchCtrl', ['$scope', '$compile', '$templateCache', function ($scope, $compile, $templateCache) { | |
// I figured out how to read my angular template from the $templateCache, but not | |
// sure how to make it "come to life" with the scope and whatnot. | |
var memberCardTpl = $templateCache.get('member-card.html'); | |
// I can use Hogan to compile the angular template, but none of the directives work. Hogan | |
// knows nothing about Angular. | |
//var resultTpl = Hogan.compile($templateCache.get('member-card.html')); | |
// this scoped variable is set in the controller and then later | |
// accessed from the typeahead directive. | |
$scope.memberData = { | |
name: 'members', | |
template: function(data) { | |
// running $compile against the template returns a DOM object, but not | |
// sure what to do with this. How do I pass in my data objects to it and | |
// how to I make Angular process the directives? | |
var compiledTpl = $compile(memberCardTpl)($scope); | |
// not exactly sure what to return here. I am assuming the Hogan.js compiledTemplate.render | |
// method would kick in here and return html as string, with the template already processes. | |
return compiledTpl; | |
} | |
}; | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// this is a very simple directive that just initializes twitter's typeahead.js | |
// using the data and options we defined in our controller | |
module.directive('typeahead', function Typeahead($route, $location, $compile, $templateCache) { | |
return { | |
restrict: 'A', | |
scope: { | |
datasets: '=' | |
}, | |
link: function (scope, element, attr) { | |
// this is where the twitter typeahead.js is initialized. | |
element.typeahead(scope.datasets); | |
} | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- this simple input has the typeahead directive and uses the | |
dataset attribute to pass along the options to our directive --> | |
<div id="user-search" ng-controller="SearchCtrl"> | |
<form> | |
<fieldset> | |
<div class="input"> | |
<input type="search" id="search-input" placeholder="Search for member" typeahead datasets="memberData"> | |
</div> | |
</fieldset> | |
</form> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- this is the angular template that I am trying to use to display | |
my typeahead results. Notice, the ng-click directives. I want those | |
guys to actually DO something! Also, the {{vars}} should be filled out | |
when the template is rendered, but they are not. Hmmmm --> | |
<script type="text/ng-template" id="member-card.html"> | |
<div class="media member-card"> | |
<div class="bd"> | |
<div class="info"> | |
<div class="name">{{name}}</div> | |
<div class="company">{{info.company}}</div> | |
<div class="contact"> | |
<span class="phone">{{info.phone}}</span> | |
</div> | |
</div> | |
<div class="actions"> | |
<a href="#/notification/package" class="action" ng-click="notifyPackage()">Package</a> | |
<a href="#/notification/guest" class="action" ng-click="notifyGuest()">Guest</a> | |
<a href="#/notification/food" class="action" ng-click="notifyFood()">Food</a> | |
</div> | |
</div> | |
</div> | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment