小编And*_*ips的帖子

在处理HTML Void元素的自定义指令时,AngularJS是否存在错误

UPDATE

  1. 首先,这不是Angular(@PSL)中的错误.
  2. 我出于历史目的将我原来的问题留在了下面.
  3. 这不是HTML规范中的错误.点击下面评论者的一些链接(@zerflagL)后,我看到HTML规范说VOID ELEMENTS不是SELF CLOSING ELEMENTS的同义词(这里是关于该主题的SO问答).
  4. 好的,我这么蹩脚的研究.
  5. 然而,加倍努力:

HTML应该包含自闭标签(它似乎不再存在),兄弟姐妹不应该神奇地成为子DOM元素(innerHTML).

感谢@PSL,@ shaunhusain和@zeroflagL让我直截了当.


我相信我可能在Angular的自定义指令处理中发现了一个错误,并希望确认我没有误解自定义指令行为.我是AngularJS的新手,所以也许我犯了一个错误.

看起来当Angular处理void元素上的自定义指令时,会发生不正确的DOM更改,并将对等元素推送到内部HTML.这是一些HTML:

<div ng-app="myApp">
    <div ng-app="mainController">
        <div>
            <voidtagtest></voidtagtest>
            <p>Example 1 - stays peer</p>
        </div>
        <div>
            <voidtagtest/>
            <p>Example 2 - becomes innerHTML</p>
            <p>this one, too.</p>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是Angular的一些JavaScript:

angular.module('myApp', [])
    .controller('mainController', function ($scope) {
        $scope.message = 'a msg';
    })
    .directive('voidtagtest', function () {
        return {
            restrict: 'E'
        };
    });
Run Code Online (Sandbox Code Playgroud)

Angular处理后的DOM(需要浏览器Web检查)是:

    ...
    <div>
        <voidtagtest>
            <p>Example 2 - becomes innerHTML</p>
            <p>this one, too.</p>
        </voidtagtest>
    </div>
    ...
Run Code Online (Sandbox Code Playgroud)

注意两个Paragraph标签是如何被拉入voidtagtest元素的?

W3C定义 …

html javascript angularjs angularjs-directive

8
推荐指数
1
解决办法
1448
查看次数

javascript 构造函数和object.create 可以结合使用吗?

更新

如果这是不可能的,请随时提供解释原因的答案。我很乐意将其标记为已接受。


我想稍微简化以下代码(对象“声明”的两个步骤,我想要一个):

var Masher = function(opts) {
    this._name  = opts.name;
};

Masher.prototype = Object.create(Object.prototype, {
    _name:  { writable: true },
    name:  { get: function() { return this._name;  }}
});

// Note: (new Masher({name: 'bar'})).name == 'bar'
Run Code Online (Sandbox Code Playgroud)

我想一次性创建整个函数原型,构造函数出现在 Object.create 的某处。也许,像这样:

var Basher = Object.create(Function.prototype, {
    _name:  { writable: true },
    name:  { get: function() { return this._name;  }},
    constructor: { value: function(opts) { this._name = opts.name; }}
});
Run Code Online (Sandbox Code Playgroud)

但是,当我调用时new Basher(),我得到:'TypeError: object is not a function'。

虽然我意识到我可以用语法糖(一个帮助程序库)来做到这一点,但我的目标是让事情尽可能简单,并对 JS 对象、原型、构造函数内部结构有一些了解。我试图阅读尽可能多的内容: …

javascript constructor new-operator object-create

5
推荐指数
1
解决办法
2128
查看次数