1）当使用非空ng-app和ng-controller时，变量由angularjs控制器来处理

2）控制器接管模型变量后，直接修改模型，模版里的变量还是会自动变的

<!DOCTYPE html>

<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<body>

<p>Try to change the names.</p>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{firstName + " " + lastName}}

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.firstName= "John";

    $scope.lastName= "Doe";

});

</script>

</body>

</html>

　　

angularjs基础——控制器的更多相关文章

  1. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

  2. AngularJS基础概念

    作用域.控制器.指令 作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是应用状态的基础.基于动 ...

  3. angularjs基础——变量绑定

    1)弄一个ng-app(angularjs 应用) 2)在里面用ng-model(angularjs 模型)就可以定义一个模型变量 3)使用模版方法就可以输出变量了(例如:{{name}}) 示例: ...

  4. Angularjs基础(三)

    AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到HTML 控制器(input,select,textarea)的值ng-model指令 ng-model指令可以 ...

  5. AngularJs开发——控制器间的通信

    AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...

  6. AngularJS入门基础——控制器

    AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是, ...

  7. AngularJS基础知识1

    一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...

  8. Angularjs基础教程

    Angularjs-基础教程 一些angualr的基础概念,适合入门. 1.下载 推荐 bower 或 npm 安装. bower install angular bower install angu ...

  9. AngularJS基础总结

    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...

随机推荐

  1. xslt循环转换子元素

    转换源xml <keywords class="array"> <e type="string">e1</e> <e ...

  2. 多进程监控自动关机工具升级远程关闭多台server——C# works with PowerShell

    之前给单位做过一个多进程监控的自动关机工具,详见那篇blog. 这次领导又加了需求,说要等进程监控结束后,不止需要关闭主控端server,还需要关闭其他servers.于是就用到了我上篇文章所介绍的知 ...

  3. python3打印26个英文字母

    for a in range(ord('a'), ord('z') + 1): print(chr(a) , end="") for a in range(ord('A'), or ...

  4. QQ自动发送+@好友功能+tencent://功能

    1.取出全部标题 D2007版本 procedure TForm1.Button1Click(Sender: TObject);var  hCurrentWindow:HWnd;  szText: a ...

  5. 全屏API接口

    HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征.有些新特征我们已知多年并大量的使用,而另外一些主要是用在前沿的手机移动技术上,或者桌面应用中起辅助作用.不管这些HT ...

  6. 模板方法模式（Head first 设计模式——7）

    一.模板方法模式定义 模板方法模式:在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 从定义中,应该可以看出一部分,为 ...

  7. Linux 网络子系统之网络协议接口层（二）

    这一篇主要围绕网络协议接口层的发送函数的解析 int dev_queue_xmit(struct sk_buff *skb) 函数解析 声明: /* include/linux/netdevice.h ...

  8. MongoDB（五）：MongoDB操作文档

    本篇文章中将讲解如何使用MongoDB操作文档. 文档的数据结构和JSON基本一致,所有存储在集合中的数据都是BSON格式.BSON是一种类似json格式的一种二进制形式的存储格式,简称Binary ...

  9. 记一次坑爹的golang 二维map判断问题

    记一次坑爹的golang 二维map判断问题 2018年10月18日 23:16:21 yinnnnnnn 阅读数:32更多 个人分类: golang   版权声明:本文为博主原创文章,未经博主允许不 ...

  10. Html5 小球键盘移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...