AngularJS 三 控制器和事件

AngularJS控制器：

ngularJS中的控制器是一个使用 $ scope 对象维护应用程序数据和行为的JavaScript函数。

您可以将属性和方法附加到控制器函数内的 $ scope  对象，反过来将添加/更新数据并将行为附加到HTML元素。$ scope对象是控制器和HTML之间的粘合剂。

该ng-controller指令用于在HTML元素中指定控制器，该控制器将添加行为或维护该HTML元素及其子元素中的数据。

附加行为：

您可以将多个方法附加到控制器内的作用域对象，这可以用作事件处理程序或用于其他目的。

附加到特定控制器内的作用域对象的属性和方法仅适用于应用了ng-controller指令的HTML元素及其子元素。

附加复杂对象：

                   

嵌套控制器：

子控制器可以访问父控制器函数中附加的属性和方法，而父控制器不能访问子控制器中附加的属性和方法。

                    

缩小语法：

AngularJS中的范围：

AngularJS中的$ scope是一个内置对象，包含应用程序数据和方法。您可以在控制器函数中为$ scope对象创建属性，并为其分配值或函数。

                            

$ rootScope：

一个AngularJS应用程序有一个$ rootScope。所有其他的$ scope对象都是子对象。附加到$ rootScope的属性和方法将可供所有控制器使用。

                          

$ scope对象的重要方法

     

$watch：

$ watch事件，每当模型属性发生变化时都会引发这个事件。

$scope的方法详解：https://docs.angularjs.org/api/ng/type/$rootScope.Scope

AngularJS事件：

AngularJS包含了一些指令，可以用来为各种DOM事件提供自定义行为，如click，dblclick，mouseenter等

例如：Click事件

        

ng-click指令用于使用“password”参数调用DisplayMessage（）函数。“密码”是在输入框中使用ng-model指令定义的模型属性。DisplayMessage（）函数附加到myController中的$ scope对象，因此当按钮位于myController下方时，可以通过按钮单击来访问它。

  

ng-class指令包含CSS类的映射，所以如果enter = true，将应用redDiv，如果leave = true，将应用yellowDiv。ng-mouseenter指令将“enter”设置为true，这会将redDiv类应用于<div>元素。同样，ng-mouseleave会将leave设置为true，这将应用yellowDiv类

事件的案列：https://docs.angularjs.org/api