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.

时间: 2024-09-17 07:11:26

angular语法:Controller As的相关文章

angular controller as syntax vs scope

      今天要和大家分享的是angular从1.2版本开始带来了新语法Controller as.再次之前我们对于angular在view上的绑定都必须使用直接的scope对象,对于controller来说我们也得必须注入$scope这个service.如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 angular.module("app",[])   .controller("demoController",["$sc

Angular.JS中的指令与参数详解

指令,很重要! AngularJS与jQuery最大的区别在哪里?我认为,表现在数据双向绑定,实质就是DOM的操作形式不一样. JQuery通过选择器找到DOM元素,再赋予元素的行为: 而AngularJS则是,将指令与DOM绑定在一起,再扩展指令的行为. 所以AngularJS开发最理想的结果就是,在页面HTML与CSS的设计时,设计工程师只需要关注指令的使用:而在背后的逻辑开发上,架构工程师则是不需要知道如何操作DOM,只需要关注指令背后的行为要如何实现就行:测试工程师也可以开发针对指令的单

angular + easyui做界面验证

angular结合easyui这事其实并不是很合适,因为:angular的特点之一是双向绑定,页面元素与页面逻辑之间解耦:easyui是对页面元素进行封装,甚至一些组件是隐藏了原本的dom元素,初始化时创建新的元素来实现功能的.在某种程度上来说,angular和easyui在工作原理上是冲突的,当然,下面就是但是了,不然就不太好往下写了.  但是,easyui的验证控件validatebox的验证控件提示明显,UI效果比较友好,而且不会影响angular的正常工作,所以我对用这两个结合做验证非常

自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框_AngularJS

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

使用AngularJS编写较为优美的JavaScript代码指南

  本文示例代码下载:modulePattern.zip - 所有的 4 个 HTML 文件 以及 panacea.js - 1.6 KB 介绍 AngularJS 的库里面有很多东西,但本文中我只想专注于小的,针对特定主题的库,我相信通过它们能对Angular有一个较好的介绍. 理解这篇文章并不需要你有任何Angular相关的,甚至是JavaScript的经验.希望你能从本文中看到一些使用Angular的好处,并乐于动手尝试. 背景 我使用Angular有一段时间了,而在学习Angular的时

AngularJS学习笔记

1. 关于AngularJS AngularJS 是 Google 开源出来的一套 js 工具.下面简称其为 ng .这里只说它是"工具",没说它是完整的"框架",是因为它并不是定位于去完成一套框架要做的事.更重要的,是它给我们揭示了一种新的应用组织与开发方式. ng 最让我称奇的,是它的数据双向绑定.其实想想,我们一直在提数据与表现的分离,但是这里的"双向绑定"从某方面来说,是把数据与表现完全绑定在一起--数据变化,表现也变化.反之,表现变化了

AngularJS —— 使用模块组织你的代码 【已翻译100%】(2/3)

函数是一个对象:它创建了范围 这是因为现在你已经把isDoingWork这个变量创建在了一个函数里面 -- 也就是我们们的匿名 IIFE 中 -- 而如此这个变量就只能通过这个函数才能访问到. 有趣的是Javascript中的所有函数都是第一类对象. 那很简明的意味着函数是一个对象,它可能通过一个变量被访问到. 或者说,另外一种描述的方式是你存储了指向 函数的一个引用,并在稍后的某个时间获取其变量. 在我们第一个示例中,我们的问题是并没有保存一个指向我们匿名函数的引用,所以我们永远也不能再获取到

最棒的Angular2表格控件_AngularJS

现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件.  Angular 2数据表格基本要求: 更小.更快.更熟悉.   为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为Flex的理念而命名,控件

AngularJS之代码风格36条建议【一】(九)

前言 其实在新学一门知识时,我们应该注意下怎么书写代码更加规范,从开始就注意养成一个良好的习惯无论是对于bug的查找还是走人后别人熟悉代码都是非常好的,利人利己的事情何乐而不为呢,关于AngularJS中的代码风格分为几节来阐述.希望对打算学习AngularJS的新手或者已经在路上的老手有那么一丢丢的帮助也是可以的. 普遍规则 tips 01(定义一个组件脚本文件时,建议此文件的代码少于400行) (1)有利于单元测试和模拟测试. (2)增加可读性.可维护性.避免和团队在源代码控制上的冲突. (