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 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
vant picker+popup 自定义三级联动案例
Nov 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
PHP n个不重复的随机数生成代码
2009/06/23 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
php实现微信企业转账功能
2018/10/02 PHP
Gird事件机制初级读本
2007/03/10 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
python 2.7.14安装图文教程
2018/04/08 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python numpy存取文件的方式
2020/04/01 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
元旦晚会邀请函
2014/01/27 职场文书
企业总经理岗位职责
2014/02/13 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
供货协议书
2014/04/22 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript