Part 34 AngularJS controller as vs scope
There are 2 ways to expose the members from the controller to the view - $scope and CONTROLLER AS. The obvious question that comes to our mind at this point is - Why do we have 2 ways of doing the same thing. Which one to use over the other and what are the differences.
Here are the differences
1. CONTROLLER AS syntax is new and is officially released in 1.2.0. $scope is the old technique and is available since the initial version of angular is released.
2. You can use either one of thes techniques. Both have their own uses. For example, CONTROLLER AS syntax makes your code more readable when working with nested scopes. We discussed this in our previous video.
3. If you want to use $scope it has to be injected into controller function, where as with CONTROLLER AS syntax there is no need for such injection, unless you need it for something else.
Which one to use depends on your personal preference. Some prefer using $scope while others prefer using CONTROLLER AS syntax. One important thing to keep in mind is that, though you are using CONTROLLER AS syntax, behind the scenes angular is still using $scope. Angular takes the controller instance and adds it as a reference on the scope.
In the above example since we are using CONTROLLER AS syntax, angular takes cityCtrl which is the instance of cityController and adds it as a reference on the scope. So in the binding expression, you can read it as $scope.cityCtrl.name
Part 34 AngularJS controller as vs scope的更多相关文章
- AngularJs(五)从Controller控制器谈谈$scope作用域
大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
- Angularjs Controller间通信的几种方法
先说最简单的,适合简单数据 一.使用controller as <body ng-controller="ParentCtrl as parent"> <inpu ...
- AngularJS 'Controller As'用法
AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$sco ...
- Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- (十六)JQuery Ready和angularJS controller的运行顺序问题
项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...
- 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...
- AngularJS系统学习之Scope(作用域)
本文出自:https://www.w3ctech.com/topic/1611 看完了没怎么懂, 也许是和别人 原文作者: Nicolas Bhttps://www.w3ctech.com/topi ...
随机推荐
- CF280D-k-Maximum Subsequence Sum【模拟费用流,线段树】
正题 题目链接:https://www.luogu.com.cn/problem/CF280D 题目大意 一个长度为\(n\)的序列,\(m\)次操作 修改一个数 询问一个区间中选出\(k\)段不交子 ...
- P6134-[JSOI2015]最小表示【bitset,拓扑排序】
正题 题目链接:https://www.luogu.com.cn/problem/P6134 题目大意 给出一张\(n\)个点\(m\)条边的\(DAG\).求联通情况不变的情况下最多删除几条边. \ ...
- C语言练习:hackerrank十五关
第一关:Hello World C 输入一行字符串(可能含空格),输出hello world\n,字符串 Sample Input 0 Welcome to C programming. Sample ...
- Unity——AssetBundle打包工具
Unity批量打AB包 为了资源热更新,Unity支持将所有资源打包成AssetBundle资源,存放在SteamingAssets文件夹中: 在项目发布之前,需要将所有资源打包成.ab文件,动态加载 ...
- 通过ideviceinstaller获取IOS APP bundleId
查看ios设备udid: idevice_id -l 查看ios应用的bundleId: # 安装ideviceinstaller brew install ideviceinstaller # 查看 ...
- python在指定一行的下一行插入文本
给定一个程序,程序中有许多函数,比如,funcA,funcB,现在,如何在生成的函数中插入一个logger()语句? 这里用一个solidity程序做例子 pragma solidity ^0.4.0 ...
- 【实验向】问题:假设计算机A和计算机B通信,计算机A给计算机B发送一串16个字节的二进制字节串,以数组形式表示:
问题: 假设计算机A和计算机B通信,计算机A给计算机B发送一串16个字节的二进制字节串,以数组形式表示: unsigned char[16] = {0x3f, 0xa0, 0x00, 0x00, 0x ...
- pycharm运行测试程序提示no tests were found
转载: https://blog.csdn.net/qq_33834328/article/details/75095078
- no_code团队介绍和bingduoduo项目采访
项目 内容 课程:北航-2020-春-软件工程 博客园班级博客 要求 团队作业-团队介绍和采访 成员简介 name avatar intro PM Dev Test UI/Front-End 伦泽标 ...
- Vue项目搭建常用的配置文件,request.js和vue.config.js
request.js用来请求数据,封装的代码如下: import axios from 'axios' const request = axios.create({ timeout: 5000 }) ...