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 相关文章推荐
JS之小练习代码
Oct 12 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
js实现简单音乐播放器
Jun 30 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
JavaScript Split()方法
2015/12/18 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
计算机学生的自我评价分享
2014/02/18 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
初三化学教学反思
2016/02/22 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技