专栏首页代码人生AngularJS系列(二)——作用域和控制器

AngularJS系列(二)——作用域和控制器

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/luo4105/article/details/77894163

作用域(scope)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript(控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:

当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。

<div ng-app="myApp"ng-controller="myCtrl">
         <inputng-model="name">
         <h1>{{greeting}}</h1>
         <buttonng-click='sayHello()'>点我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.name = "张三";
         $scope.sayHello=function(){
                   $scope.greeting= "hello " + $scope.name;
         }
});
</script>
<p>当你修改输入框中的值时,会影响到模型(model),当然也会影响到控制器对应的属性值。</p>

控制器(controller)

AngularJS应用程序被控制器控制。

ng-controller定义控制器。

控制器是标准的js对象,由标准的js对象的构造函数创建。

controller的@scope用来保存Angular Model

controller定义model,view使用model。

<div ng-app="myApp"ng-controller="myCtrl">
         名:<inputname="firstname" value="{{firstname}}" /></br>
         姓:<inputname="lastname" value="{{lastname}}" /></br>
         姓名:{{firstname+ lastname}}
</div>
<script>
         varapp = angular.module("myApp",[]);
         varctrl = app.controller('myCtrl',function($scope){
                   $scope.firstname= "John";
                   $scope.lastname= "Doe";
         })
</script>

controller定义方法,view使用方法

<div ng-app="myApp"ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text"ng-model="lastName"><br>
<br>
姓名:{{fullname()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl',function($scope) {
   $scope.firstName = "John";
   $scope.lastName = "Doe";
         $scope.fullname= function(){
                   return$scope.firstName + " " + $scope.lastName;
         }
});
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端 MVVM 模式中的数据层(Model)实战应用

    当今时代,React、Vue、AngularJS 三大框架横行,我们很难争论出哪个是最好的框架,但三者共同点是 MVVM 的模式,用一张简单的图可以看到,MVV...

    CSDN技术头条
  • ui-select官方教程(一)——入门简介

    https://github.com/angular-ui/ui-select/wiki

    逝兮诚
  • AngularJS-tree教程

    AngularJS-tree是AngularJS官方出品的tree控件,它与AngularJS无缝组合、且方便实用。AngularJS-tree的github官...

    逝兮诚
  • AngularJS系列(四)——服务

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • Angular React Vue我应该选择什么?

    为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博...

    gemron的空间
  • AngularJS系列(一)——常用指令

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • 可能是你见过的最完善的微前端解决方案

    技术栈无关:主框架不限制接入应用的技术栈,子应用具备完全自主权 独立开发、独立部署:子应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 独立运行...

    用户4962466
  • AngularJS系列(十一)——路由和复制

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚
  • Modern Web Development, Design and Deployment

    Modern web development, design and deployment can be effectively described as ev...

    用户4822892

扫码关注云+社区

领取腾讯云代金券