javascript - AngularJS - html under my directive is not showing - Stack Overflow

admin管理员组

文章数量:1289412

Please see relevant jsFiddle

Within this file I have two spans 'test1' and 'test2'. The span 'test2' is showing but the span underneath my custom directive 'test1' is not showing or being called into the page at all. Why?

<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").autoplete({
                 source: items
     });

    };
});

Please see relevant jsFiddle

Within this file I have two spans 'test1' and 'test2'. The span 'test2' is showing but the span underneath my custom directive 'test1' is not showing or being called into the page at all. Why?

<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").autoplete({
                 source: items
     });

    };
});

• javascript
• html
• angularjs
• dom
• angularjs-directive

Share Improve this question Follow edited Jun 30, 2015 at 20:36 Pankaj Parkar 136k2323 gold badges240240 silver badges303303 bronze badges asked Jun 30, 2015 at 20:16 JebathonJebathon 4,5811414 gold badges6161 silver badges116116 bronze badges 3

• 2 <search-bar></search-bar> seems to work for me – timeiscoffee Commented Jun 30, 2015 at 20:20
• @timeiscoffee Nice catch..I've added the detail version of answer... – Pankaj Parkar Commented Jun 30, 2015 at 20:34
• 1 possible duplicate of Angular element directives not displaying when using self-closing tags – naXa stands with Ukraine Commented Jul 30, 2015 at 8:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

As you are doing <search-bar/> that means you are considering the directive element tag as a self-closing tag. Custom html elements are not self-closing by nature, so you should close the element of your directive like <search-bar> </search-bar>

Currently your <span>test1</span> is disappearing because you have not closed you directive element, so the browser does close that element by itself where its parent element gets closed like here div with ng-controller is parent

Before Rendering

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

After Rendering

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

There after the directive start its working on the element & replace the directive element with the input element.

Here are list of self closing html tags

Working Fiddle

you cant use in angular ... its just not valid. You must close directive, with close 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>

本文标签： javascriptAngularJShtml under my directive is not showingStack Overflow