AngularJS - html dưới chỉ thị của tôi không hiển thị

Question

Please see relevant jsFiddle

Trong tập tin này tôi có hai nhịp 'test1' và 'test2'. Khoảng 'test2' đang hiển thị nhưng khoảng cách bên dưới chỉ thị tùy chỉnh 'test1' của tôi không hiển thị hoặc được gọi vào trang. Tại sao?

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

Mã kiễu góc

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

Khi bạn đang làm <search-bar/> đó có nghĩa là bạn đang cân nhắc các yếu tố chỉ thị thẻ như thẻ tự đóng. yếu tố tùy chỉnh html không tự đóng bởi thiên nhiên, vì vậy bạn nên đóng các yếu tố của chỉ thị của bạn như <search-bar> </search-bar>

Hiện nay <span>test1</span> bạn đang biến mất bởi vì bạn chưa đóng, bạn yếu tố chỉ thị, vì vậy trình duyệt không đóng yếu tố đó bởi bản thân nơi yếu tố mẹ của nó bị đóng như đây div với ng-controller là mẹ

Trước Rendering

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

Sau Rende vòng

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

Có sau khi chỉ thị bắt đầu làm việc của mình trên các yếu tố & thay thế các yếu tố chỉ thị với các yếu tố đầu vào.

Dưới đây là list of self closing html tags

Working Fiddle

Answer 2

bạn không thể sử dụng trong góc ... nó chỉ là không hợp lệ. Bạn phải đóng chỉ thị, với thẻ gần

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