前言

上篇大概说了一下指令的应用格式以及创建自定义指令方法,本篇重点介绍一些ng-controller都有哪些小作用。

内容

通过修改控制器部分,修改显示界面。

Demo

<div ng-app="myApp" ng-controller="myCtrl">

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

1、ng-app在<div>中定义,则AngularJS应用程序在该div中运行;

2、ng-controller=”myCtrl”属性是一个AngularJS指令。用于定义一个控制器。

3、myCtrl实质是一个JavaScript函数;

4、使用$scope对象来调用控制器;

5、控制器$scope(相当于作用域、控制范围)用来保存AngularJS
Model(模型)的对象;

6、FirstName和lastName是作用域scope中的两个属性;

7、ng-model指令绑定输入域到控制器的属性;

小结

通过控制器,可以不修改后台代码的情况下,达到测试界面显示的功效,并且达到修改数据在不刷新的情况下达到界面显示同步的功效。

感谢您的宝贵时间···

最新文章

  1. SharePoint 2013 create workflow by SharePoint Designer 2013
  2. SQL中select与set的区别-转载
  3. Code Conventions for the Java
  4. 14 Generator
  5. POJ2417 Discrete Logging
  6. Wordpress-数据库结构分析(转)
  7. [复变函数]第11堂课 3.3 Cauchy 积分定理及其推论
  8. java SimpleDateFormat
  9. CentOS下php使用127.0.0.1不能连接mysql的解决方法
  10. js中访问对象的方法
  11. Oracle优化:千万级大表逻辑判断的累赘
  12. CentOS 7 服务器配置--安装MongoDB
  13. FoxOne---一个快速高效的BS框架--数据访问(Dao)
  14. [SHOI2009] 会场预约 - Treap
  15. class09
  16. 使用Selenium IDE和webDriver进行自动化软件测试
  17. 2554 ACM 杭电 数学
  18. EntityFramework用法探索(八)事务处理
  19. Android学习之Handler消息
  20. Animator &amp; Timeline

热门文章

  1. 蓝桥杯 算法训练 ALGO-122 未名湖边的烦恼
  2. python with open as f 写韩文中文乱码
  3. 线性表的链式存储——C语言实现
  4. HeapCreate深入研究
  5. 11-18网页基础--第二部分CSS样式属性(1)
  6. 部署和调优 1.3 pureftp部署和优化-2
  7. openGL一些概念02
  8. 北京儿研所自制药一览表,宝妈们必读!&lt;转&gt;
  9. 斐波那契数列-java实现
  10. JavaScript的运算符