Angular作用域对象与控制器对象

最新推荐文章于 2021-03-29 08:01:00 发布

xcmercy

最新推荐文章于 2021-03-29 08:01:00 发布

阅读量401

点赞数

分类专栏： JavaScript 文章标签： Angular

本文链接：https://blog.youkuaiyun.com/cccmercy/article/details/82939474

版权

JavaScript 专栏收录该内容

39 篇文章

订阅专栏

Angular作用域对象与控制器对象

基于`AngularJS v1.2.29`版本

作用域对象

它是一个js实例对象，ng-app指令默认创建一个根作用域对象（$rootScope）
它的属性和方法与页面中的指令或表达式是关联的

控制器对象

是一个js实例对象，用来控制AngularJS应用数据

`ng-controller`

指定控制器的构造函数，AngularJS会根据此构造函数创建控制器对象
AngularJS在创建控制器对象的同时，还会创建一个作用域对象$scope，它是$rootScope的子对象
控制器的构造函数必须有一个名为$scope的形参，AngularJS会自动将$scope对象传入

举个栗子

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app>
<div ng-controller="MyController">
    <input type="text" ng-model="firstName">
    <input type="text" ng-model="lastName">
    <p>username1: {{firstName + '-' + lastName}}</p>
    <p>username2: {{getName()}}</p>
</div>

<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
    function MyController($scope) {
        console.log(this);
        console.log($scope);
        $scope.firstName = 'M';
        $scope.lastName = 'xc';
        $scope.getName = function () {
            console.log(this === $scope);
            return $scope.firstName + ' ' + this.lastName;
        }
    }
</script>
</body>
</html>

基于`AngularJS v1.5.5`版本

在AngularJS v1.5.5版本中，Angular在作用域对象与控制器对象的理论方面变化不大，但使用方式发生变化，举个栗子。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<!-- 
	注意：
		1. ng-app指令的属性值
		2. 使用Angular必须先创建模块，然后通过模块创建控制器
-->
<body ng-app="myApp">
<div ng-controller="c1">
    <input type="text" ng-model="name">
    <p>name: {{name}}</p>
</div>
<div ng-controller="c2">
    <input type="text" ng-model="name">
    <p>name: {{name}}</p>
</div>

<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
    /*var myAppModule = angular.module('myApp', []);
    myAppModule.controller('c1', function ($scope) {
        $scope.name = 'A';
    });
    myAppModule.controller('c2', function ($scope) {
        $scope.name = 'B';
    });*/
    // Angular的链式调用
    angular.module('myApp', [])
            .controller('c1', ['$scope', function ($scope) {
                $scope.name = 'A';
            }])
            .controller('c2', ['$scope', function ($scope) {
                $scope.name = 'B';
            }]);
</script>
</body>
</html>