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 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Vue基础配置讲解
Nov 29 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
vue生命周期的探索
2019/04/03 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python反编译学习之字节码详解
2019/05/19 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
个人函授自我鉴定
2014/03/25 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js
vue动态绑定style样式
2022/04/20 Vue.js
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技