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>正在消失,因为你还没有关闭,则指令元素,这样浏览器就通过自身在那里它的父元素被关闭喜欢这里关闭元素div与ng-controller为父母

在渲染之前

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

渲染后

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

在指令开始处理元素并用input元素替换指令元素之后.

以下是自我关闭的html标签列表

工作小提琴