AngularJS - html unter meiner Richtlinie nicht

Question

Please see relevant jsFiddle

In dieser Datei zeigt habe ich zwei Spannweiten ‚test1‘ und ‚test2‘. Der Bereich 'test2' wird angezeigt, aber der Bereich unter meiner benutzerdefinierten Anweisung 'test1' wird nicht angezeigt oder überhaupt nicht in die Seite eingefügt. Warum?

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

    }; 
}); 

Answer 1

schließen Wie Sie <search-bar/> tun, das heißt, dass Sie die Richtlinie Elementtag als selbstschließenden Tag in Betracht ziehen. Benutzerdefinierte HTML-Elemente sind nicht selbstschließend von Natur aus, so sollten Sie das Element Ihrer Richtlinie schließen wie <search-bar> </search-bar>

Derzeit Ihre <span>test1</span> verschwindet, weil Sie nicht, dass Sie Richtlinie Element geschlossen haben, so dass der Browser selbst dieses Element nicht schließt, wo Mutterelement wie hier div mit ng-controller geschlossen wird ist Mutter

Vor Rendering

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

Nach Rende Ring

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

Es gibt nach der Richtlinie & seine Arbeit an dem Element beginnen die Richtlinie Element mit dem Eingangselement ersetzen.

Hier sind list of self closing html tags

Working Fiddle

Answer 2

you cant Verwendung in Winkel ... es ist einfach nicht gültig. Sie müssen Richtlinie, mit der Nähe tag

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