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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
angular 服务随记小结
May 06 Javascript
vue 实现特定条件下绑定事件
Nov 09 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 和 MYSQL
2006/10/09 PHP
深入解析php之apc
2013/05/15 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
python 对xml解析的示例
2021/02/27 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python