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中的函数
Jan 22 Javascript
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
javascript中递归的两种写法
Jan 17 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php session 预定义数组
2009/03/16 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
详解Python中类的定义与使用
2017/04/11 Python
Django单元测试工具test client使用详解
2019/08/02 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
文员个人求职自荐信
2013/09/21 职场文书
简单英文演讲稿
2014/01/01 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
英语教学随笔感言
2014/02/20 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS