AngularJS控制器controller给模型数据赋初始值的方法

carrymyteams 2017-01-04

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

carrymyteams

carrymyteams

相关推荐

AngularJS自定义表单验证功能实例详解

本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考，具体如下：。Angular实现了大部分常用的HTML5的表单控件的类型，也实现了很多指令做为验证。为了取得这个controller对象，我们需要requirengModel指令。在$

雅特岚蒂斯 / 0评论 2018-08-24

angularjs link compile与controller的区别详解，了解angular生命周期

我在 angularjs 一篇文章看懂自定义指令directive一文中简单提及了自定义指令中的link链接函数与compile编译函数，并说到两者具有互斥特性，即同时存在link与compile时link不生效。我们已经知道编译函数compile与链接函

Frankywls / 0评论 2019-10-19

AngularJS内幕详解之Directive

　　在这系列的上一篇文章，我讨论了scope事件以及digest循环的行为。这篇文章包括 独立的scope，内嵌，link函数，编译器，指令控制器等等。　　如果这个图表看起来非常的费解，那么这篇文章很适合你。　　声明: 这篇文字是基于 AngularJS

CrazyDogWang / 0评论 2017-09-10

AngularJS内幕详解之Scope

　　在AngularJS的代码库中呈现出了大量有趣的设计，最有趣的两个例子是scope的工作方式和directives(指令)的表现。　　有的人第一次接触AngularJS时就被告知directives是和DOM交互，或供你随意操作DOM，就像jQuery

zbwroom / 0评论 2017-09-10

AngularJS内幕详解之Directive

在这系列的上一篇文章，我讨论了scope事件以及digest循环的行为。这篇文章包括 独立的scope，内嵌，link函数，编译器，指令控制器等等。如果这个图表看起来非常的费解，那么这篇文章很适合你。声明: 这篇文字是基于 AngularJS v1.3.0

zbwroom / 0评论 2017-09-10

AngularJS内幕详解之Scope

在AngularJS的代码库中呈现出了大量有趣的设计，最有趣的两个例子是scope的工作方式和directives(指令)的表现。有的人第一次接触AngularJS时就被告知directives是和DOM交互，或供你随意操作DOM，就像jQuery. 这立

SakuraLu / 0评论 2017-09-10

《AngularJS》5个实例详解Directive（指令）机制

本文整理并扩展了《AngularJS》这本书第六章里面的内容，此书近期即将由电子工业出版社出版，敬请期待口令：Angular. </tabpanel>很多人可能要惊呼，这货和JSP或者Struts等等框架里面的taglib很像啊！呃，说实话，实

youyouzouzou / 0评论 2016-05-11

博弈AngularJS讲义(8) - 模板

在Angular中，模板是包含通过Angular定义的元素和属性的HTML代码。Angular将控制器及模型中的信息与模板绑定起来动态的展现视图。可以通过ng-view指令在$route服务中载入配置好的模板片段。我们会在后面章节中详解各种模板以及angu

youyouzouzou / 0评论 2014-12-05

博弈AngularJS讲义(3) - 数据绑定

在AngularJS中数据绑定意指模型和视图组件之间的数据自动同步。AngularJS应用是基于模型驱动的。当Model状态改变时，视图会及时反映出变化，反之亦然。AngularJS强大的双向绑定解决了一次性单向绑定的问题，Angular会对定制的标记或指

CrazyDogWang / 0评论 2014-11-27

博弈AngularJS讲义(1) - 快速开始

通过AngularJS可以扩展HTML的语法，让页面显得更加简洁。由于国内访问Google Site受限，所以广大的爱好者可能无法访问到最好的AngularJS资源，我们将在稍后的章节中结合大量的官方代码片段对AngularJS进行详解，尽显其强大之处。A

zbwroom / 0评论 2014-11-24

AngularJs 功能（四）--控制器

控制器控制器Controller是Angular应用三大组成部分之一。说一说我对angular控制器的理解：AngularJS 应用程序被控制器控制。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。Angular

zhenghao / 0评论 2019-06-26

angular 指令详解（一）compile与link

AngularJS directives是令人惊艳的。它允许你创造高度语意且可重复利用的元件。在某种意义上你可以认为它是极致的web components先驱者。相较之下，只有少许的资讯谈到有关compile及link函式的差异，更不用说有关pre-lin

拓宇 / 0评论 2019-06-21

angularJS directive用法详解

最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。欢迎批评指出错误的地方。（字符串）可选参数，指明指令在DOM里面以什么形式被声明；注意：如果想支持IE8，则最好使用属性和类形式来定义。})HTML代码：<direct

拓宇 / 0评论 2019-06-20

详解Angularjs 自定义指令中的数据绑定

有关自定义指令的scope参数，网上很多文章都在讲这3种绑定方式实现的效果是什么，但几乎没有人讲到底怎么使用，本篇希望聊聊 到底怎么用 这个话题。自定义指令，是 Angularjs 用来实现组件化的方式，相比于 React 和 Vue 的组件化方式，它真的

闲听风月 / 0评论 2018-07-19

详解angularjs 学习之 scope作用域

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个存储应用数据模型的对象，有可用的方法和属性。$scope.name = "天下行走";控制器中创建一个属性名 &quo

carrymyteams / 0评论 2018-01-15

使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

最近在做项目时，遇到了需要用到多选按钮选中触发事件的功能，因此我查找了一下AngularJS的提供的指令，但是没有发现相应的指令。而一个看起来很像的指令就是ng-checked，但是这个指令是用来代替标签里面checked属性的，所以也用不了。因此我就自己

carrymyteams / 0评论 2019-05-06

详解angularJS自定义指令间的相互交互

transclude：当元素标签需要嵌套时使用，与ng-transclude配合使用。默认值为false不能使用嵌套，true为可以使用嵌套。controller是多调用性的数据共享，指令与指令间进行交互时也可以设置一些方法数据，在其他标签中也可以调用。^

codergirl / 0评论 2017-07-05

详解AngularJS脏检查机制及$timeout的妙用

“脏检查”是Angular中的核心机制之一，它是实现双向绑定、MVVM模式的重要基础。Angular将双向绑定转换为一堆watch表达式，然后递归检查这些watch表达式的结果是否变了，如果变了，则执行相应的watcher函数。等到Model的值不再变化，

雅特岚蒂斯 / 0评论 2017-06-19

angularjs之$timeout指令详解

angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行.如果需要取消一个timeout,调用$ti

emilycd / 0评论 2017-06-13

AngularJS自定义指令详解（有分页插件代码）

调用自定义指令时，需要在HTMl 元素上添加自定义指令名。自定义指令命名规则：使用驼峰命名法来命名，即除第一个单词外的首字母需大写。在html页面调用该指令时需要以 - 分割，如： my-directive。transclude boolean

飞鹰 / 0评论 2017-06-12

详解angularjs中如何实现控制器和指令之间交互

//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的。});这时候我们的指令通过scope.loadData或者scope.$apply就可以完成对控制器的调用了。而且两个控制器中$scope中方法

老卫的技术站 / 0评论 2017-05-31

详解angularjs中的隔离作用域理解以及绑定策略

});这时候当运行页面的时候发现只要有一个input中的输入变化了，这时候所有的nput的内容都会变化：。这样就会面临一个问题：我们的指令无法单独使用,于是就有了独立作用域的概念。});通过把scope设置为{}，那么每一个指令就具有自己独立的scope空

cjwjyooo / 0评论 2017-05-31

Angularjs自定义指令Directive详解

今天学习angularjs自定义指令Directive。Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin"。@Scripts.Render以上是AS

Inuyasha / 0评论 2017-05-27

AngularJS表单提交实例详解

本文实例讲述了AngularJS表单提交。分享给大家供大家参考，具体如下：。AngularJS创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。只有被具有ng-app属性的DOM元素包含的元素才会受An

howtoseegoodbye / 0评论 2017-02-18

AngularJS执行流程详解

浏览器解析HTML页面，读取到angular.js的<script>标签后会停止解析后面的DOM节点，开始执行angular.js，与此同时，Angular会设置一个事件监听器来监听DOMContentLoaded事件，当Angular监听到这

雅特岚蒂斯 / 0评论 2017-02-17

详解Angularjs 如何自定义Img的ng-load 事件

在使用AngularJs的过程中，我们常常会用到一些ng-事件，如ng-click、ng-change等，这些事件都是AngularJs事先为我们定义好的。也有的情况下，我们会用到一些使用频率不高的dom事件，如img的onload，但AngularJs中

cjwjyooo / 0评论 2017-02-15

angularJS 指令封装回到顶部示例详解

关于angularJS如何回到顶部，还是直接code吧！element代表实例元素,指使用此指令的元素。attrs代表实例属性,是一个由定义在元素上的属性组成的标准化列表,可以在所有指 令的链接函数间共享。会以JavaScript对象的形式进行传递。res

鸟菜小端前 / 0评论 2017-01-22

AngularJS的ng-repeat指令与scope继承关系实例详解

本文实例分析了AngularJS的ng-repeat指令与scope继承关系。分享给大家供大家参考，具体如下：。<input type="button" ng-repeat="button in buttons"

forthemyth / 0评论 2017-01-21

详解AngularJS验证、过滤器、指令

angularJS中提供了许多的验证指令，可以轻松的实现验证，只需要在表单元素上添加相应的ng属性，常见的如下所示：。<input Type="text" ng-model="" [name="&qu

itseebin / 0评论 2017-01-04

AngularJS自定义控件实例详解

本文实例讲述了AngularJS自定义控件。分享给大家供大家参考，具体如下：。AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染。比如说，内插指令 , ng-repeat 指令以及 ng-if 指令。当然你也可以实现自己的。这就

wssssg / 0评论 2016-12-13

AngularJS封装指令方法详解

本文实例讲述了AngularJS封装指令方法。分享给大家供大家参考，具体如下：。HTML是一门很好的为静态文本设计的语言，但要构建动态的web应用它就显的乏力了。典型的类库，例如prototype、jQuery等。AngularJS也是其中之一。很多ang

一个女胖子 / 0评论 2016-12-12

AngularJS中transclude用法详解

本文实例讲述了AngularJS中transclude用法。分享给大家供大家参考，具体如下：。如果你深入的使用angular的话，你就花很大一部分时间来创建自定义指令，那么就不可避免的要深入理解transclude。在compile函数中接收到了一个叫tr

夏小球 / 0评论 2016-11-03

AngularJS创建自定义指令的方法详解

本文实例讲述了AngularJS创建自定义指令的方法。分享给大家供大家参考，具体如下：。这是一篇译文，来自angular开发者说明的指令。主要面向已经熟悉angular开发基础的开发者。这篇文档解释了什么情况下需要创建自己的指令，和如何去创建指令。从一个高

闲听风月 / 0评论 2016-11-03

AngularJS指令用法详解

本文实例讲述了AngularJS指令用法。分享给大家供大家参考，具体如下：。指令是任何AngularJS应用中最重要的成分。尽管AngularJS已经自带了很多指令，你经常会发现需要自己亲手创建一些特别的指令。本文将会带你了解自定义指令并解释如何在现实世界

飞鹰 / 0评论 2016-11-02

AngularJS中如何使用echart插件示例详解

首先我们要做的是在我们的项目中引入我们所需要的依赖，假设你已经在你的电脑上已经安装好了node与cnpm只需要利用控制台在你的项目目录下使用如下命令。}]);从控制台中的输出我们很容易的就可以看到echarts被引入到了指令内，这个时候我们就可以利用ech

howtoseegoodbye / 0评论 2019-04-29

angularJs关于指令的一些冷门属性详解

指令优先级，优先级越高，指令越早执行。或许有人疑问了，transclude也算是冷门属性吗？其实大家对transclude了解并没有想象的那么深，transclude是一个挺复杂的属性，一般大家会用到的也仅仅是true,false。最后在研究$transc

thesameguo / 0评论 2019-04-29

AngularJS 双向数据绑定详解简单实例

angular的双向数据绑定，个人理解是，通过model建立数据模型，那么视图上的数据就会对应存储在angular程序里，视图上的数据变化会同步到model，model的数据改变也会同步到视图。-- ng-model指令将表单的value绑定到model的

wssssg / 0评论 2019-04-29

AngularJS 单元测试（一）详解

网上有很多单元测试的教程，比如如何安装jasmine和ngMock，大家可以搜一下。这里就不在说了。下面重点介绍一个单元测试的过程。AngularJS用module来包括应用不同的部分比如controllers,services, filters。ngMo

howtoseegoodbye / 0评论 2016-09-21

AngularJS中关于ng-class指令的几种实现方式详解

开发中经常会遇到这样的需求，一个元素需要在不同的状态下呈现不同的样子，而在这所谓的的样子当然就是改变其css的属性，而实现动态的改变属性值，我们就需要实现动态的更换其class属性值。在这给大家介绍三种方法来实现，大家可以根据自己的需求来选择方式，下面来看

cjwjyooo / 0评论 2019-04-26

AngularJS 指令的交互详解及实例代码

为了便于结果的展示，为标签添加鼠标的响应事件，当鼠标移动到对应的标签上就会触发一个方法，打印出具备的能力。在该模块的基础上，创建标签superman，与前面类似。});这里不同的是，在方法内部有一个controller属性，这个并不是ng-controll

codergirl / 0评论 2016-09-14

AngularJS 自定义指令详解及实例代码

AngularJS支持用户自定义标签属性，在不需要使用DOM节点操作的情况下，添加自定义的内容。});其中，xingoo是我们自定义标签的名字，后面跟着它的方法函数。上面提到了标签的四种使用方法，即AECM。一般来说推荐，当做属性和元素来使用。当想要自定义

闲听风月 / 0评论 2016-09-14

AngularJS 实现JavaScript 动画效果详解

AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。我们能够在应用的部分内容当中使用动画来表明一些变化正在发生。在这篇文章当中，我们会看到怎样利用Ja

老卫的技术站 / 0评论 2019-04-26

详解AngularJS中ng-src指令的使用

在日常开发工作中，有很多需求是在一个页面上显示一些图片。有时，图片的地址路径是由客户端的脚本来设置。这是Angularjs的时代，当我们想使用Angularjs来实现在页面中展示图片，我们会简单使用： <img src=”path of image”

codergirl / 0评论 2019-04-26

AngularJs 指令详解及示例代码

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。一般考虑到浏览器的兼容性，强烈建议使用默认的属性就可以即即以属性的形式来进行声明。但同当

夏小球 / 0评论 2016-09-01

AngularJS入门教程之迭代器过滤详解

我们在上一步做了很多基础性的训练，所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能（没错，这个真的非常简单！同时，我们也会写一个端到端测试，因为一个好的端到端测试可以帮上很大忙。它监视着你的应用，并且在发生回归的时候迅速报告。注意到页面上的手机

夏小球 / 0评论 2016-08-18

AngularJS 工作原理详解

个人觉得，要很好的理解AngularJS的运行机制，才能尽可能避免掉到坑里面去。在这篇文章中，我将根据网上的资料和自己的理解对AngularJS的在启动后，每一步都做了些什么，做一个比较清楚详细的解析。首先上一小段代码，结合代码我们来看看，angular一

鸟菜小端前 / 0评论 2016-08-18

AngularJS 自定义指令详解及示例代码

自定义指令使用的“指令”的功能定义。引导过程中AngularJS应用程序找到了匹配的元素，并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素。AngularJS提供支持，以下列元素的类型来创建自定义指

forthemyth / 0评论 2016-08-17

AngularJS表单详解及示例代码

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。使用点击一个按钮的指令，表单重置数据。可使用下面跟踪误差。$dirty - 规定值已被改变。$invalid- 该值的状态是无效的。$error- 指出确切的错误

forthemyth / 0评论 2016-08-17

AngularJS指令详解及示例代码

AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令：。ng-app - 该指令启动一个AngularJS应用。ng-init - 该指令初始化应用程序数据。ng-model - 此指令定义的模型，该模型是变量在A

鸟菜小端前 / 0评论 2019-04-26