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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
H5上传本地图片并预览功能
May 08 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 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地址引用(php地址引用的效率问题)
2012/03/23 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php中session定期自动清理的方法
2015/11/12 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
JavaScript实现简单的日历效果
2016/09/25 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python文件编写好后如何实践
2020/07/07 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
干部下基层实施方案
2014/03/14 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
Redis入门教程详解
2021/08/30 Redis
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers