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 相关文章推荐
推荐20家国外的脚本下载网站
Apr 28 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 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表单转换textarea换行符的方法
2010/09/10 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
vue + element-ui的分页问题实现
2018/12/17 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
在python下读取并展示raw格式的图片实例
2019/01/24 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
个人求职信范文分享
2013/12/13 职场文书
大型会议接待方案
2014/03/01 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
付款证明格式范文
2015/06/19 职场文书
大学开学感言
2015/08/01 职场文书
六五普法学习心得体会
2016/01/21 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers