Within this file I have two spans 'test1' and 'test2'. The span 'test2' is showing but the span underneath my custom directive 'test1' is not showing or being called into the page at all. Why?
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<search-bar/> <!-- The Search Bar Directive -->
<span>test1</span>
</div>
<span>test2</span>
</div>
Angular Code
var app = angular.module('HelloApp', [])
app.directive('searchBar', function() {
return {
restrict: 'AE',
replace: true,
template: '<input type="text" ng-model="searchData" placeholder="Enter a search" id="searchbarid" />',
link: function(scope, elem, attrs) {
elem.bind('keyup', function() {
scope.$apply(function() {
scope.search(elem);
});
});
}
};
});
app.controller('MyCtrl', function($scope) {
var items = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];
$scope.search = function(element) {
$("#searchbarid").autocomplete({
source: items
});
};
});
See Question&Answers more detail:os