AngularJS控制器controller给模型数据赋初始值的方法


Posted in Javascript onJanuary 04, 2017

本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法。分享给大家供大家参考,具体如下:

之前的文章《AngularJS入门示例之Hello World详解》,很简单的就实现了模型数据和页面显示的自动绑定。现在我们使用控制器,给模型赋初始值。如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行

$("#target").attr("value",selfValue);

使用AngularJS代码如下:

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>Hello,World!</title>
    <script src="angular1.2.25.js"></script>
    <script>
    function WholeController($scope)
    {
    $scope.yourName = "aty";
    }
    </script>
  </head>
  <body ng-controller="WholeController">
    <input type="text" ng-model="yourName">
    <h1>Hello, {{yourName}}</h1>
  </body>
</html>

这里需要注意:函数名必须与ng-controller中的名称一致,函数的参数$scope名次也是固定的,不能随便修改。这样的话,AngularJS框架会自动执行我们的控制器,并将作用域对象注入到函数参数。很显然这种方式非常不好,因为不能改变函数参数名,后面我会看到还有别的方式来达到同样的目的,后续我们再继续学习。可以看到Controller就是一个JavaScript 函数,在 Angular 里,当这个函数通过 ng-controller 指令绑定到 DOM 上的时候,这个函数就是 Controller 了,我们可以为 Controller Scope 对象。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript使用location.search的示例
Nov 05 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 #Javascript
微信小程序 石头剪刀布实例代码
Jan 04 #Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 #Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 #Javascript
AngularJS入门示例之Hello World详解
Jan 04 #Javascript
详解AngularJS验证、过滤器、指令
Jan 04 #Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 #Javascript
You might like
php正则
2006/07/07 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
Yii中表单用法实例详解
2016/01/05 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
axios学习教程全攻略
2017/03/26 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
js实现点击烟花特效
2020/10/14 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Vue 数据响应式相关总结
2021/01/28 Vue.js
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python3+Appium安装使用教程
2019/07/05 Python
Python属性和内建属性实例解析
2020/01/14 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
大专生简历的自我评价
2013/11/26 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
2014年终工作总结范本
2014/12/15 职场文书
投诉信格式范文
2015/07/02 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
js不常见操作运算符总结
2021/11/20 Javascript
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers