AngularJS控制器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/mm825474872/article/details/70832142

这篇文章主要介绍AngularJs中的控制器。控制器是AngularJs中用于进行数据逻辑处理和操作的一个模块,通过controller()函数来定义，控制器中的参数$scope，这个参数不需要赋值，angular会自动给$scope参数传递一个数据进行使用，我们可以通过$scope挂载数据、挂载处理函数。

下面这个案例中定义了两个控制器，myCtrl中定义了name变量，赋值jerry，myCtrl2中也定义了name变量，赋值tom，两个变量在不同的控制器中定义，互相独立不影响。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/angular.min.js"></script>
</head>
<body>


</body>
<div ng-controller="myCtrl">
    ng-bind: <span ng-bind="name"></span>
</div>
<hr>
<div ng-controller="myCtrl2">
    ng-bind: <span ng-bind="name"></span>
    <button ng-click="testFn()">点击</button>
</div>


<script>
    var app = angular.module("myApp", []);


    app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });


    app.controller("myCtrl2", function($scope) {
        $scope.name = "tom";


        $scope.testFn = function() {
            alert("用户点击了按钮...");
        }
    });


</script>
</html>

当多个控制器中需要用到同一个变量时，为了方便多个控制器中的公共数据初始化，AngularJs提供了一个全局作用域对象$rootScope。在AngularJs应用中，仅有一个全局作用域，其他所有的$scope作用域都是$rootScope的子元素。使用$rootScope，可以用于初始化全局变量和函数但是存在一个问题: 因为控制器函数中可以直接使用$rootScope，就有可能会造成全局数据污染，将$rootScope和Angular模块的run()方法一起使用可以避免这个问题。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/angular.min.js"></script>
</head>
<body>
    <div ng-controller="c1">
        <div ng-bind="name1"></div>
        <div ng-bind="name2"></div>
        <div ng-bind="name3"></div>
    </div>
    <hr>
    <div ng-controller="c2">
         <div ng-bind="name1"></div>
        <div ng-bind="name2"></div>
        <div ng-bind="name3"></div>
    </div>
    <hr>
    <div ng-controller="c3">
         <div ng-bind="name1"></div>
        <div ng-bind="name2"></div>
        <div ng-bind="name3"></div>
    </div>
<script>
    var app = angular.module("myApp", []);
    app.controller("c1", function($rootScope, $scope) {
        $scope.name1 = "tom";
        $scope.name2 = "jerry";
    });
    app.controller("c2", function($scope) {
        $scope.name1 = "tom";
    });
    app.controller("c3", function($rootScope, $scope) {
        $scope.name1 = "tom";
    });
       app.run(function($rootScope) {
        $rootScope.name2 = "shuke";
    });
    app.run(function($rootScope) {
        $rootScope.name3 = "beita";
    });
</script>
</body>
</html>