AngularJS-我的指令下的html不显示

Question

请参阅相关的jsFiddle

在此文件中，我有两个跨度“ test1”和“ test2”。正在显示跨度“ test2”，但自定义指令“
test1”下面的跨度根本没有显示或未在页面中调用。为什么？

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

角度代码

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

在执行<search- bar/>此操作时，意味着您正在考虑将指令元素标签视为自动关闭标签。自定义html元素本质上并不是自动关闭的，因此您应该像这样关闭指令的元素<search- bar> </search-bar>

当前您<span>test1</span>正在消失，因为您尚未关闭指令元素，因此浏览器会自行关闭其父元素被关闭的元素，如此处的divwith
ng-controller是parent

渲染之前

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

渲染后

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

指令开始后，在元素上开始工作，并用输入元素替换指令元素。

这是 自动关闭html标签的列表

工作小提琴