如何在AngularJS中实例化控制器组件？_JavaScript

这是我的控制器。

angular.module('homePage').controller('buttonViewCtrl',  [function() {
    console.log(this);
    this.buttonDisplay = false;
    console.log(this);

    this.nav = function() {
        console.log(this);  //returns Object {buttonDisplay: false}
        //console.log(JSON.stringify(this));
        this.buttonDisplay = true;
    };

    this.closeNav = function() {
        console.log(this); //returns Object {buttonDisplay: true}
        //console.log(JSON.stringify(this)); 
        this.buttonDisplay = false;
    };
}])

第一个console.log方法记录一个空对象。

第二个console.log方法记录了添加了属性buttonDisplay的控制器对象。

第三个console.log方法（位于nav() ）使用所有其方法记录控制器对象，如下所示：

第四个console.log方法记录更改了buttonDisplay属性的同一对象。

我有两个问题。

1）根据我的理解，从这个示例中，当Angular看到控制器定义时，它将声明一个空对象。 然后在执行时将属性附加到对象。 我的问题是，当nav()方法被触发时，它将如何检测到控制器中还有其他方法，并将它们也附加到控制器对象closeNav() in this case ）。 我预期的行为是，它在触发时仅附加了nav()方法，而在触发closeNav()时，它也将其附加到了控制器对象上。 如您所见，在图3中，Angular已将closeNav()附加到控制器而没有被触发。 Angular如何做到这一点？

2）根据Angular的最佳实践，我们不应该在控制器中操纵DOM。 在我的控制器中， nav()函数显示导航栏模板，而closeNav()函数将其关闭。 这被视为DOM操作吗？ 我在控制器中添加了过多的演示逻辑吗？

1）根据我的理解，从这个例子中，当Angular看到controllerdefineition时，它声明了一个空对象。

实际上不，Angular只是记得控制器已经以某种名称注册。 当Angular确定需要时，例如当遇到带有ng-controller="..."指令的DOM节点时，实例化ng-controller="..." 。 那时，它将调用new ControllerFunction(...) ，并将其所有已声明的依赖项作为参数传递。

因此，在控制器仍在初始化时执行前两个console.log()调用，这就是您尚未在其中看到其所有成员的原因。

2）根据Angular的最佳实践，我们不应该在控制器中操纵DOM。 在我的控制器中，nav（）函数显示导航栏模板，而closeNav（）函数将其关闭。 这被视为DOM操作吗？

不，不是，那很好。 毕竟，提供视图（模板）所需的所有数据是控制器的工作。 例如，如果您开始创建新的DOM元素，直接操作它们的属性，在它们上注册事件处理程序等，那么直接DOM操作就可以了（这种东西属于指令）。

如何在AngularJS中实例化控制器组件？

问题描述

1楼