<html ng-app="notesApp">

 <head><title>Notes App</title></head>

 <body ng-controller="MainCtrl as ctrl">

   <form ng-submit="ctrl.submit()" name="myForm">

     <input type="text"

        name="uname"

        ng-model="ctrl.user.username"

        required

        ng-minlength="4">

     <span ng-show="myForm.uname.$error.required">

       This is a required field

     </span>

     <span ng-show="myForm.uname.$error.minlength">

       Minimum length required is 4

     </span>

     <span ng-show="myForm.uname.$invalid">

       This field is invalid

     </span>

     <input type="password"

        name="pwd"

        ng-model="ctrl.user.password"

        required>

     <span ng-show="myForm.pwd.$error.required">

       This is a required field

     </span>

     <input type="submit"

        value="Submit"

        ng-disabled="myForm.$invalid">

   </form>

 <script src="http://riafan.com/libs/angular.js"></script>

 <script type="text/javascript">

   angular.module('notesApp', [])

     .controller('MainCtrl', [function() {

       var self = this;

       self.submit = function() {

         console.log('User clicked submit with ', self.user);

       };

     }]);

 </script>

 </body>

 </html>
ng-controller="MainCtrl as ctrl"，允许数据可以在同一个页面的不同的controller之间自由穿梭。。。

Create a reference to this in our controller.

angular.module('app').controller('MainCtrl', function ($scope){

  var self = this;

Remove $scope from our controller dependency, and use self instead of $scope.

angular.module('app').controller('MainCtrl', function (){

  var self = this;

  self.message = 'hello';

  self.changeMessage = function(message){

    self.message = message;

  };

});

angularjs的Controller as的更多相关文章

  1. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  2. angularjs 的controller的三种写法

    AngularJS 的controller其实就是一个方法,它有三种写法: 第一种: <pre name="code" class="javascript" ...

  3. Angularjs中controller的三种写法

    在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中cont ...

  4. Angularjs之controller 和filter（四）

    Controller组件(http://www.angularjs.cn/A00C) 在AngularJS中,控制器是一个Javascript函数(类型/类),用来增强除了根作用域以外的作用域实例的. ...

  5. 在AngularJS的controller外部直接获取$scope

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/5560843.html ...

  6. angularJS的controller之间如何正确的通信

    AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...

  7. angularjs 外部调用controller中的方法

    angular.element(document.querySelector('[ng-controller=mainCtrl]')).scope().viewGo('tab.VIPPay_Succe ...

  8. 【angularJS】Controller控制器

    1. 定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ng-controller指 ...

  9. AngularJS-01.AngularJS,Module,Controller,scope

    1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.(  MVC ---- Model(模型).View(视图).Controller(控制器) ) ...

  10. angularJS中controller的通信

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. 图层损坏 E/ArcGIS﹕ The map or layer has been destroyed or recycled. 资源未释放

    看到论坛上有个网友和我一样的问题: The map or layer has been destroyed or recyled t Hello, I have a problem when the ...

  2. linux上传的命令

    pscp D:\apache-tomcat-8.0.38\webapps\GameDataServer.zip root@112.74.32.215:/usr/local/tools/tomcat/a ...

  3. nginx配置hls

    备注:本来是想用浏览器播放hls,后来没有成功,最后使用flash播放rtmp的方案.所以下面的配置未使用. 修改/usr/local/nginx/conf/nginx.conf文件内容如下: wor ...

  4. SQL Server：获取本月最后一天[转]

    方法一:set @EndDate = dateadd(month, datediff(month, -1, @StoredDate), -1) @StoredDate为本月的任意一天 这里datedi ...

  5. 使用pt-query-digest，找到不是很合适的sql

    pt-query-digest 1.  概述 索引可以我们更快速的执行查询,但是肯定存在不合理的索引,如果想找到那些索引不是很合适的查询,并在它们成为问题前进行优化,则可以使用pt-query-dig ...

  6. jsp页面has already been called for this response错误解决方法。

    创建验证码的jsp页面提示错误:has already been called for this response <%@ page contentType="image/jpeg&q ...

  7. [转帖]go 的goroutine 以及 channel 的简介.

    进程,线程的概念在操作系统的书上已经有详细的介绍.进程是内存资源管理和cpu调度的执行单元.为了有效利用多核处理器的优势,将进程进一步细分,允许一个进程里存在多个线程,这多个线程还是共享同一片内存空间 ...

  8. list 交换位置扩展

    public static List<T> Swap<T>(this List<T> list, int index1,int index2) { if(index ...

  9. POJ3281_Dining

    有一些饮料和食物,每种一个,每个客人喜欢一些饮料和一些食物,每个客人可以选择一种饮料和一种食物,问最多能够同时满足多少个客人同时拥有饮料和食物. 这样的,源点连接饮料,汇点连接食物,中间人分别连接饮料 ...

  10. 对synchronized的一点理解

    一.synchronized的使用(一).synchronized同步方法1. “非线程安全”问题存在于“实例变量”中,如果是方法内部的私有变量,则不存在“非线程安全”问题.2. 如果多个线程共同访问 ...