AngularJS - 我的HTML指令下不显示 [英] AngularJS - html under my directive is not showing

问题描述

请参阅相关的jsfiddle

在这个文件中，我有两个跨越测试1和TEST2。跨度test2的正显示出，但跨度我的自定义指令'test1的'下不显示或被叫进了页面在所有。为什么呢？

 ＆LT; D​​IV NG-应用=HELLOAPP＆GT;
    ＆LT; D​​IV NG控制器=MyCtrl＆GT;
        ＆LT;搜索栏/＆GT; ＆LT;！ - 搜索栏指令 - ＆GT;
        ＆LT;跨度＆GT;＆TEST1 LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;跨度＆GT; test2的＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
 

角code

  VAR应用= angular.module（'HELLOAPP'，[]）app.directive（搜索栏，函数（）{
    返回{
        限制：AE，
        更换：真实，
        模板：'＆LT;输入类型=文本NG模型=searchData占位符=输入搜索ID =searchbarid/＆GT;，
        链接：功能（范围，ELEM，ATTRS）{
            elem.bind（'KEYUP'，函数（）{
                范围。$应用（函数（）{
                    scope.search（ELEM）;
                }）;
            }）;
        }
    };
}）;app.controller（'MyCtrl'，函数（$范围）{    VAR项目= [问，总是，全，没事，一，富，黑莓，推特，force9，西方人，运动];    $ scope.search =功能（元素）{
        $（＃searchbarid）。自动完成（{
                 来源：项目
     }）;    };
}）;
 

解决方案

当你正在做的＆LT;搜索栏/＆GT; ，表示你正在考虑的指令元素标签作为一个自闭的标签。自定义HTML元素不是自闭的性质，所以你应该关闭指令的元素如＆LT;搜索栏＆GT; ＆LT; /搜索栏＆GT;

目前你的＆LT;跨度＆GT;测试1＆LT; / SPAN＆GT; 正在消失，因为你还没有关闭，则指令元素，这样浏览器就被自己关闭该元素在哪里其父元素被关闭喜欢这里 DIV 与 NG-控制器是父

渲染之前

 ＆LT; D​​IV NG控制器=MyCtrl＆GT;
    ＆LT;搜索栏/＆GT; ＆LT;！ - 搜索栏指令 - ＆GT;
    ＆LT;跨度＆GT;＆TEST1 LT; / SPAN＆GT;
＆LT; / DIV＆GT;
 

渲染后

 ＆LT; D​​IV NG控制器=MyCtrl＆GT;
    ＆LT;搜索栏＆GT;＆LT; /搜索栏＆GT;
＆LT; / DIV＆GT;
 

该指令后

有启动其元件功放的工作;与输入元素替换指令元素。

下面是 自封闭HTML标签的列表

工作小提琴

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

    };
});

解决方案

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

这篇关于AngularJS - 我的HTML指令下不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！