javascript - AngularJS - 我的指令下的 html 没有显示

Question

Please see relevant 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>

Angular 代码

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>正在消失，因为你没有关闭你的指令元素，所以浏览器会自己关闭那个元素，它的父元素像这里一样被关闭 div与 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>

在指令开始处理元素后，将指令元素替换为输入元素。

这是 list of self closing html tags

Working Fiddle