angular语法:Controller As
这个东东我觉得很好哟。
数据可以在同一个页面的不同的controller之间自由穿梭。。。
当然,
https://thinkster.io/a-better-way-to-learn-angularjs/controllers
这个网址也不错哟。。。
https://thinkster.io/a-better-way-to-learn-angularjs
Controller As Syntax
While everything we've created in this example so far works fine, a possible issue we can come accross as our application grows is when we start nesting controllers. Since each controller gets assigned their own scope, controllers that are nested can have trouble accessing variables from the parent scope. Specifically when data is being read from a child controller, where the value is directly assigned to the parent $scope
and not namespaced within an object (accessing $scope.data.message
will work from a child controller but accessing $scope.message
can break). The rule of thumb is to always have a dot when referencing variables from controllers in your angular expressions. We can enforce this by using the "controller as" syntax. This makes it so that your controllers can be directly referenced within the view. The "controller as" syntax is generally the preferred syntax for controllers.
Read this post on the "controller as" syntax
Now let's update our code to use the "controller as". Since our scope becomes the this
keyword in our controller, we'll need to create a reference to this
so that we don't lose context of our controller when we create/call functions within our controller.
Read the MDN reference for the this
keyword in javascript
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; }; });
Now, let's update our view to use the "controller as" syntax.
<div ng-controller="MainCtrl as main"> <p>{{ main.message }}</p> <form ng-submit="main.changeMessage(main.newMessage)"> <input type="text" ng-model="main.newMessage"> <button type="submit">Change Message</button> </form> </div>
Now all of our variables in our Angular expressions contain a dot, and we're able to directly reference our controllers so that when we have nested or multiple nested controllers, we can access variables directly instead of using $parent
.
angular语法:Controller As的更多相关文章
- angular 语法的应用
angular.js 一个js框架 , 是三大主流框架之一:( vue react angular ): 原先的开发:前端和后台,利用 Ajax 进行交互, 但是框架却提出了一种开发模式:mvc 这 ...
- Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on
$emit只能向parent controller传递event与data( $emit(name, args) ) $broadcast只能向child controller传递event与data ...
- angular2.0学习笔记4.npm常用指令记录及angular语法
以下命令,都需要在命令行窗口中,先切入到项目文件夹目录,再执行 1.npm start 这个命令会在“监听”模式下运行TypeScript编译器,当代码变化时,它会自动重新编译. 同时,该命令还会在浏 ...
- $scope angular在controller之外调用
1.定义 var m = angular.module('ddd',[]); m.controller('ctrl',['$scope',function ($scope) { }]); 2.外部调用 ...
- Angular语法(三)——数据绑定
绑定类型 绑定类型可以按照数据流的方向分为三类:从源到视图,从视图到源,以及双向序列 示例 <!-- Bind button disabled state to `isUnchanged` pr ...
- angular控制器controller里获取不到ng-model的值,获取为undefined
所遇问题: html:ng-model=“test”, 但是在controller里打印的$scope属性里面并未发现test,控制台打印test为undefined,页面上{{test}}却可以正常 ...
- Angular语法(一)——展示数据
双花括号{{}} 展示数据 title = 'Tour of Heroes'; myHero = 'Windstorm'; <h1>{{title}}</h1> <h2& ...
- Angular语法(二)——模板语法
双花括号{{}} <img src="{{heroImageUrl}}" style="height:30px"> <!-- "Th ...
- angular controller as syntax vs scope
今天要和大家分享的是angular从1.2版本开始带来了新语法Controller as.再次之前我们对于angular在view上的绑定都必须使用直接的scope对象,对于controller来说我 ...
随机推荐
- title及alt提示特效
<html> <head> <title>title及alt提示特效</title> <style type="text/css&quo ...
- html表单验证程序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ios7开发学习笔记-包括c oc 和ios介绍
请查看我的新浪资料分享 http://iask.sina.com.cn/u/2430843520
- Linux系统日志及日志分析
Linux系统日志及日志分析 Linux系统拥有非常灵活和强大的日志功能,可以保存几乎所有的操作记录,并可以从中检索出我们需要的信息. 大部分Linux发行版默认的日志守护进程为 syslog,位 ...
- sql server case when 判断为空
代码如下 select distinct G.* ,(select BUSINESS_NAME from BusinessInfo where BusinessInfo.BUSINESS_BID=G. ...
- HDU4870_Rating_双号从零单排_高斯消元求期望
原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4870 原题: Rating Time Limit: 10000/5000 MS (Java/Other ...
- 论文的构思!姚小白的html5游戏设计开发与构思----给审核我论文的导师看的
此处只为笔记 游戏么基本上确定是用canvas做个能一只手玩的游戏!基本打飞机之类的.毕竟手机也就上下班玩玩的.上下班么基本就是一只手拉着扶手一只手撸啊撸! 当然啦,如果能搞出超级牛逼的游戏,比如刺客 ...
- java笔记--使用事件分配线程更新Swing控件
使用事件分配线程更新Swing控件: Swing并不是线程安全的,如果在多个线程中更新Swing控件,则很可能造成程序崩溃. 为了避免这种问题,可以使用时间分配线程来更新Swing控件. EventQ ...
- 变色龙安装程序 Chameleon Install 2.2 svn 2281发布
变色龙安装程序 Chameleon Install 2.2 svn 2281发布 1.更好的支持10.9 Mavericks2.更新ATi.nVidia显卡支持列表3.添加新的 CPU Model I ...
- Rotate bitmap by real angle
tl;dr; Use GDI+ SetWorldTransform With WinAPI's SetWorldTransform you can transform the space of dev ...