javascript - 从另一个模块隐藏元素

Question

我从事 angularjs 单页应用程序项目

我的 angularjs 项目中有两个模块 module-'A' 和 module-'B'。每个模块都有 View 模板。 Module-'B' 模板的 View 有 id ="siteDataView" 的 div，我需要将此 div 隐藏在 module-'A' 之外名为 hideMenu() 的 Controller 函数。

我尝试这样:

(function () {
"use strict";

  angular.module("module-A").controller("module-A-Controller", ["$state", module-A-Controller]);

  function module-A-Controller() {
    var self = this;

    this.hideMenu = function () {
       var elem = document.getElementById("siteDataView");
       elem.hide();
    }
    self.hideMenu();
  }
})();

但问题是 elem 变量始终为 null。

知道我错过了什么吗？为什么我无法使用 id=siteDataView 访问该元素？

Answer 1

您正在 Controller 内调用 hideMenu 函数，该函数不起作用。因为模块和 Controller 函数是在创建 DOM 之前启动的，所以在此调用过程中 elem 将为 null。最好在 DOM 中的 ng-init 指令中调用此方法。