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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
js倒计时小程序
Nov 05 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
PHP 中的批处理的实现
2007/06/14 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
php的hash算法介绍
2014/02/13 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
JS常用算法实现代码
2016/11/14 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
教师自我反思材料
2014/02/14 职场文书
会计专业求职信范文
2014/03/16 职场文书
交通安全横幅标语
2014/10/07 职场文书
房屋所有权证明
2014/10/20 职场文书
2014年度个人总结范文
2015/03/09 职场文书
房贷收入证明范本
2015/06/12 职场文书
小学中队长竞选稿
2015/11/20 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python