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 Function对象扩展之延时执行函数
Jul 06 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 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下实现农历日历的代码
2007/03/07 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
json跨域调用python的方法详解
2017/01/11 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
校园环保建议书
2014/05/14 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python