Angularjs指令删除从父分区的所有内容 [英] Angularjs directive removes all content from parent div

查看:156
本文介绍了Angularjs指令删除从父分区的所有内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有自定义指令申报与替换的设置的真正

当我把它放在HTML配有独立的结束标记:

 < D​​IV>
    <搜索框搜索=搜索(查询)查询=查询>< /搜索框>
    < D​​IV CLASS =dataDiv>
        <! - 其他div元素 - >
    < / DIV>
< / DIV>

一切正常。

但这种方式重写后的HTML:

 < D​​IV>
    <搜索框搜索=搜索(查询)查询=查询/>
    < D​​IV CLASS =dataDiv>
        <! - 其他div元素 - >
    < / DIV>
< / DIV>

指令完全取代所有父DIV的内容与它的模板,并会删除的 dataDiv 的距离产生的HTML页面。

是可以在指令声明中改变了这种预期的角度行为还是什么?

指令:

 功能搜索盒(){
    返回{
        限制:'E',
        更换:真实,
        模板:'...',
        范围: {
            查询:'='
        },
        链接:功能($范围,$元素){
            ...
        },
        控制器:函数($范围){
            ...
        }
    }
}


解决方案

根据您的文档类型,你可能给错意的关闭斜线。
默认情况下,自耕农发电机和角度种子使用<!DOCTYPE HTML> (HTML5)

在HTML 5,<富/> 办法<富> 。斜杠只是语法糖
勾选此是自结束标记有效的HTML5?

根据浏览器的实现,它会自动在一个地方或其他添加结束标记,当你离开强就像打开并阅读呈现code。

I have custom directive declaration with replace set to true.

When I place it in html with separate close tag:

<div>
    <search-box search="search(query)" query="query" ></search-box>
    <div class="dataDiv">
        <!--other div elements -->
    </div>
</div>

everything works as expected.

But after rewriting html in this way:

<div>
    <search-box search="search(query)" query="query" />
    <div class="dataDiv">
        <!--other div elements -->
    </div>
</div>

directive completely replaces all parent div content with it's template and removes dataDiv from resulting html page.

Is this expected angular behavior or something that can be changed in directive declaration?

Directive:

function SearchBox() {
    return {
        restrict: 'E',
        replace: true,
        template: '...',
        scope: {
            query: '='
        },
        link: function($scope, $element){
            ...
        },
        controller: function ($scope) {
            ...
        }
    }
}

解决方案

Depending on your doctype you might be giving the wrong meaning to the "closing" slash. by default, yeoman generator and angular-seed use <!doctype html> (html5)

In HTML 5, <foo /> means <foo>. The slash is just syntactic sugar Check this Are self-closing tags valid in HTML5?

Depending on the browser implementation, it will add automatically a closing tag in one place or another, just like when you leave bodyor strong open and read the rendered code.

这篇关于Angularjs指令删除从父分区的所有内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆