AngularJS 控制器

最新推荐文章于 2020-01-18 16:15:47 发布

蒋固金

最新推荐文章于 2020-01-18 16:15:47 发布

阅读量2.2k

点赞数 1

分类专栏： AngularJS 文章标签： angularjs 控制器

本文链接：https://blog.csdn.net/jianggujin/article/details/50930249

版权

AngularJS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

AngularJS

10 篇文章 3 订阅

订阅专栏

在前面的博客中，我们能看到类似着这样的代码<div ng-controller="ctrl1">，这就是AngularJS的控制器指令。
AngularJS 应用程序被控制器控制。ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) {
                $scope.name = "jianggujin";
            });
        </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="text" ng-model="name" />
        <div>Hello {{name}}</div>
    </body>

</html>

AngularJS 应用程序由 ng-app 定义。应用程序在<body> 内运行。ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了一个属性 name。ng-model 指令绑定输入域到控制器的属性name。

在上面的示例演示了一个带有name属性的控制器对象。控制器也可以有方法（变量和函数）的，我们现在对上面的示例进行改造：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) {
                $scope.name = "jianggujin";
                $scope.welcom = function() {
                    return "Hello " + $scope.name;
                }
            });
        </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="text" ng-model="name" />
        <div>{{welcom()}}</div>
    </body>

</html>

蒋固金

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 控制器

在前面的博客中，我们能看到类似着这样的代码<div ng-controller="ctrl1">，这就是AngularJS的控制器指令。 AngularJS 应用程序被控制器控制。ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
复制链接

扫一扫