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入门教程(6) Window窗口对象
Jan 31 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python单例模式的多种实现方法
2019/07/26 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
职业生涯规划设计步骤
2014/01/12 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
厉行节约工作总结
2015/08/12 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
golang的文件创建及读写操作
2022/04/14 Golang