Question

如果我想在DOM上删除/添加元素，我只使用ng-if并且其下的代码不会编译到DOM中，我可以使用纯js执行相同的操作吗？我不想在我的js代码中使用HTML代码。

使用CSS隐藏它：

<div id = "infoPage" style="display: none;">

仍会将元素插入DOM。

修改

显示与否的条件基于如下标志：

var show = false; //or true

Answer 1

您可以尝试这样的事情：

思想：

创建一个对象，其中包含currentElement及其父级的引用（以便您知道添加位置）。
创建当前元素的克隆，因为您希望在删除后添加相同的元素。
使用Object.defineProperty创建属性。这样你就可以拥有自己的setter，你可以观察它的变化。
要切换元素，请检查
- 如果value为true，则必须添加元素。但请检查相同的元素是否已经可用，以避免重复。
- 如果为false，请删除元素。

＆＃13;

var CustomNGIf = function(element, callback, propertyName) {
  var _value = null;

  // Create copies of elements do that you can store/use it in future 
  this.parent = element.parentNode;
  this.element = element;
  this.clone = null;

  // Create a property that is supposed to be watched
  Object.defineProperty(this, propertyName, {
    get: function() {
      return _value;
    },
    set: function(value) {
      // If same value is passed, do nothing.
      if (_value === value) return;
      _value = !!value;
      this.handleChange(_value);
    }
  });

  this.handleChange = function(value) {
    this.clone = this.element.cloneNode(true);
    if (_value) {
      var index = Array.from(this.parent.children).indexOf(this.element);

      // Check if element is already existing or not.
      // This can happen if some code breaks before deleting node.
      if (index >= 0) return;
      this.element = this.clone.cloneNode(true);
      this.parent.appendChild(this.element);
    } else {
      this.element.remove();
    }

    // For any special handling
    callback && callback();
  }
}

var div = document.getElementById('infoPage');
const propName = 'value';
var obj = new CustomNGIf(div, function() {
  console.log("change")
}, propName);

var count = 0;
var interval = setInterval(function() {
  obj[propName] = count++ % 2;
  if (count >= 10) {
    window.clearInterval(interval);
  }
}, 2000)

＆＃13;

<div class='content'>
  <div id="infoPage"> test </div>
</div>

＆＃13;

相当于angularjs ng-if的JavaScript

1 个答案:

思想：