AngularJS系列(二)——作用域和控制器
来源:互联网 发布:大学老师知乎 编辑:程序博客网 时间:2024/05/29 18:26
作用域(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 0
- AngularJS系列(二)——作用域和控制器
- AngularJS系列——作用域、控制器、模块和服务
- AngularJS无作用域控制器
- angularJS思维导图02 作用域和控制器
- angularJS学习之路(二十九)---控制器的别名使用 和它的作用域的确定
- 神奇的angularJS——controller控制器的作用
- 神奇的angularJS——controller控制器的作用
- AngularJS自学之路(二)——模块和作用域
- AngularJS 学习 之 作用域、控制器、表达式
- AngularJS——控制器
- AngularJs—控制器 <controller>
- AngularJS—剖析AngularJS作用域
- AngularJS系列:10、作用域
- AngularJs知识点整理(二)之——MVVM简介、控制器
- AngularJS控制器嵌套(作用域包含作用域)
- 构建自己的AngularJS - 作用域和Digest(二)
- AngularJs 基础教程 —— 控制器
- AngularJS自学之路(三)——控制器和表达式
- struts2中result的type属性详解
- 【web开发】小小网络工程狮的日常-(2017-9-8)
- 从 0 开始创建一个属于你自己的 PHP 框架
- Fiddler抓包-抓APP的请求
- Oracle trunc()函数的用法简单使用
- AngularJS系列(二)——作用域和控制器
- iOS 之NSRange实现小数向上取整
- 锐利特科技物联网云平台解决方案
- Kth Smallest Element in a Sorted Matrix问题及解法
- Linux 的虚拟文件系统(强烈推荐)
- echarts 获取geojson中的数据
- 广西贺州市八步区领导干部前来梦想小镇参观学习
- 离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程
- 【java笔试系列七】I/O整理