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

本文链接：https://blog.youkuaiyun.com/learning_ever/article/details/70946147

AngularJS控制器：

AngularJS控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。

1.单个控制器：

实例：

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

</body>
<div ng-controller="myCtrl">
    Mustache:{{name}}**--{{param}}--**
    ng-bind: <span ng-bind="name"></span>
</div>
<hr>
<div ng-controller="myCtrl2">
    Mustache:{{name}}**--{{param}}--**
    ng-bind: <span ng-bind="name"></span>
    <button ng-click="test()">clickMe test()</button>
    <button ng-click="testFn()">clickMe testFn()</button>
</div>

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

    app.controller("myCtrl", function($scope) {
        // 通过$scope挂载变量
        $scope.name = "jerry";
    });

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

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

    /* 常规定义的普通变量和函数 */
    var param = "hello!";
    function test() {
        alert("用户点击......");
    }
</script>
</html>

页面中显示的效果：

当点击clickMe testFn()按钮显示的效果：

控制器中的参数$scope，这个参数不需要赋值，angular会自动给$scope参数传递一个数据进行使用，控制器：主要用来通过$scope挂载数据、挂载处理函数。

2.多个控制器：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
    <div ng-controller="c1">
        <div ng-bind="nickname"></div>
        <div ng-bind="username"></div>
        <div ng-bind="realname"></div>
    </div>
    <hr>
    <div ng-controller="c2">
        <div ng-bind="nickname"></div>
        <div ng-bind="username"></div>
        <div ng-bind="realname"></div>
    </div>
    <hr>
    <div ng-controller="c3">
        <div ng-bind="nickname"></div>
        <div ng-bind="username"></div>
        <div ng-bind="realname"></div>
    </div>
<script>
    var app = angular.module("myApp", []);

   
    app.controller("c1", function($rootScope, $scope) {
        $scope.nickname = "董小姐";
        $scope.realname = "芙蓉姐姐";
        $rootScope.username = "黄蓉";
    });
    app.controller("c2", function($scope) {
        $scope.nickname = "董小姐";
    });
    app.controller("c3", function($rootScope, $scope) {
        $scope.nickname = "董小姐";
        $rootScope.username = "";
    });

    /* 专门用于初始化全局数据 */
    app.run(function($rootScope) {
        $rootScope.username = "汪苏泷";
    });
</script>
</body>
</html>