AngularJS - HTML sotto la mia direttiva non sta mostrando

Question

Please see relevant jsFiddle

All'interno di questo file ho due campate 'test1' e 'test2'. Lo span 'test2' sta mostrando ma lo span al di sotto della mia direttiva personalizzata 'test1' non viene mostrato o chiamato nella pagina. Perché?

<div ng-app="HelloApp"> 
    <div ng-controller="MyCtrl"> 
     <search-bar/> <!-- The Search Bar Directive --> 
     <span>test1</span> 
    </div> 
    <span>test2</span> 
</div> 

Codice angolare

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 
    }); 

    }; 
}); 

Answer 1

Come si sta facendo <search-bar/> che significa che si stanno prendendo in considerazione il tag elemento direttiva come un tag di chiusura automatica. elementi HTML personalizzati non sono a chiusura automatica per natura, così si dovrebbe chiudere l'elemento della vostra direttiva come <search-bar> </search-bar>

Attualmente tua <span>test1</span> sta scomparendo perché non avete chiuso elemento di direttiva, in modo che il navigatore si chiude l'elemento di per sé in cui suo elemento genitore viene chiuso come qui div con ng-controller è genitore

Prima di rendering

<div ng-controller="MyCtrl"> 
    <search-bar/> <!-- The Search Bar Directive --> 
    <span>test1</span> 
</div> 

Dopo Rende Anello

<div ng-controller="MyCtrl"> 
    <search-bar></search-bar> 
</div> 

C'è dopo la direttiva iniziare il suo lavoro sull'elemento & sostituire l'elemento di direttiva con l'elemento di input.

Ecco list of self closing html tags

Working Fiddle

Answer 2

voi uso sopraelevazione in angolare ... la sua non solo valida. È necessario chiudere direttiva, con tag di chiusura

<div ng-app="HelloApp"> 
    <div ng-controller="MyCtrl"> 
     <search-bar> </search-bar><!-- The Search Bar Directive --> 
     <span>test1</span> 
    </div> 
    <span>test2</span> 
</div>