Please see relevant jsFiddle
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
});
};
});
Put a debugger; statement inside the constructor of your directive. Then you'll know for sure when it's working and you can remove it. Make sure you have selector: '[magicFeature]' and not selector: 'magicFeature' Sometimes you need to restart your ng serve to make sure everything is refreshed.
A - ng-bind directive binds the AngularJS Application data to HTML tags.
In addition to all the built-in AngularJS directives, you can create your own directives. New directives are created by using the . directive function. To invoke the new directive, make an HTML element with the same tag name as the new directive.
ng-app: The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS Application.
As you are doing <search-bar/>
that means you are considering the directive element tag as a self-closing tag. Custom html elements are not self-closing by nature, so you should close the element of your directive like <search-bar> </search-bar>
Currently your <span>test1</span>
is disappearing because you have not closed you directive element, so the browser does close that element by itself where its parent element gets closed like here div
with ng-controller
is parent
Before Rendering
<div ng-controller="MyCtrl">
<search-bar/> <!-- The Search Bar Directive -->
<span>test1</span>
</div>
After Rendering
<div ng-controller="MyCtrl">
<search-bar></search-bar>
</div>
There after the directive start its working on the element & replace the directive element with the input element.
Here are list of self closing html tags
Working Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With