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 相关文章推荐
Maps Javascript
Jan 22 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
JS面向对象编程浅析
Aug 28 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
JS面试题中深拷贝的实现讲解
May 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 简单日历实现代码
2009/10/28 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
python获取服务器响应cookie的实例
2018/12/28 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
高三历史教学反思
2014/01/09 职场文书
公司活动邀请函
2014/01/24 职场文书
媒体宣传策划方案
2014/05/25 职场文书
保护动物的标语
2014/06/11 职场文书
2014年节能工作总结
2014/12/18 职场文书
三下乡个人总结
2015/03/04 职场文书
2015年消防工作总结
2015/04/24 职场文书
干部外出学习心得体会
2016/01/18 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸