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

Question

这是我的控制器。

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操纵吗？我在控制器中添加了太多的表示逻辑吗？

Answer 1

  

1）从这个例子中，根据我的理解，当Angular看到一个控制器定义时，它会声明一个空对象。

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

前两个console.log()调用因此在控制器仍处于初始化状态时执行，这就是你还没有看到所有成员的原因。

  

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

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