--@angularJS--独立作用域scope绑定策略之=符策略
1、index.html:
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>scopeEqual</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
</head>
<body>
<!-- 下面是指令scope作用域=符demo. -->
<div ng-controller="myCtrl">
<label for="" class="control-label">控制器中的内容:</label>
<input type="text" ng-model="ctrlFlavor" />
<label for="" class="control-label">指令中的内容:</label>
<drink flavor="ctrlFlavor"></drink>
</div>
<script src="./scopeEqual.js"></script>
</body>
</html>
2、scopeEqual.js:
var myModule = angular.module("app",[]);
myModule.controller('myCtrl', ['$scope', function($scope){
$scope.ctrlFlavor = "百事达";
}]);
myModule.directive('drink',function(){
return {
restrict: 'AE',
scope:{
fla:'=flavor'//还是传递同标签内的属性值,就能形成双向数据绑定.在独立作用域中同样是ng-model中的值,要想形成双向ng-model数据绑定的赋值形式的话必须用=号赋属性值给ng-model才行.fla是ng-model值,标签属性flavor获取的是控制器中所赋的值
},
template: '<input type="text" ng-model="fla" />',
// link: function(scope, elm, attrs) {
// scope.fla = scope.ctrlFlavor;//这样写虽然能把控制器中的初始值赋给ng-model="fla"中的fla,但是与上一个input里面的ng-model="ctrlFlavor"形成不了双向数据绑定,就是你我均独立,互不干扰,互不影响,所以要实现双向数据绑定,还得借助于scope:里面的等号"="双向绑定机制
// }
}
});
--@angularJS--独立作用域scope绑定策略之=符策略的更多相关文章
- --@angularJS--独立作用域scope绑定策略之&符策略
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>s ...
- 理解AngularJS的作用域Scope
AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- angularjs指令系统系列课程(4):作用域Scope
指令的scope对象是一个很重要,很复杂的对象,我们这一节作为重点讲解 可取值: 1.false(默认), 2.true, 3.{}(object) 1.false:默认值,不创建新的作用域 2.tr ...
- 【AngularJS】—— 12 独立作用域
前面通过视频学习了解了指令的概念,这里学习一下指令中的作用域的相关内容. 通过独立作用域的不同绑定,可以实现更具适应性的自定义标签.借由不同的绑定规则绑定属性,从而定义出符合更多应用场景的标签. 本篇 ...
- angularJS(二):作用域$scope、控制器、过滤器
app.controller创建控制器 一.作用域 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. ...
- AngularJS讲义 - 作用域
什么是作用域? Angular中作用域(scope)是模板以及工作的上下文环境,作用域中存放了应用模型和视图相关的回调行为.作用域是层次化结构的与相关联的DOM结构相对应.作用域可以观察表达式以及传播 ...
- AngularJS 深入理解 $scope 转载▼
AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...
- AngularJs 隔离作用域
初学NG,有诸多的不解,今天看了一篇文章,原文地址:https://segmentfault.com/a/1190000002773689#articleHeader0 ,本文运行的代码也出处此. 里 ...
随机推荐
- tabBar自定义
有时系统的tabBar并不能满足我们的开发需求: 这时,我们需要自定义一个tabBar.直接上代码: // 在tabBarController中用KVC更换掉系统tabBar [self setVal ...
- HDOJ 1319 Prime Cuts<数论>
学会了不难.通过这道题学习了两点: 1:筛选法求素数. 2:在写比较长的程序的时候,给每个功能部分加上注释,思路会更清晰. 题意: 1.题目中所说的素数并不是真正的素数,包括1: 2.需要读懂题意,对 ...
- PAT (Advanced Level) 1064. Complete Binary Search Tree (30)
因为是要构造完全二叉树,所以树的形状已经确定了. 因此只要递归确定每个节点是多少即可. #include<cstdio> #include<cstring> #include& ...
- JAVA基础--IO流
数据流的方向: 输入流, 输出流 数据单位: 字节流, 字符流 功能不同: 节点流, 处理流 JDK提供的4种抽象流: 输入流: 字节流(InputStream), 字符流(Reader) , 站在程 ...
- 转发:Xcode插件
古人云“工欲善其事必先利其器”,打造一个强大的开发环境,是立即提升自身战斗力的绝佳途径!以下是搜集的一些有力的XCode插件. 1.全能搜索家CodePilot 2.0 你要找的是文件?是文件夹? ...
- Ubuntu上CUDA和CUDNN的安装
Ubuntu上CUDA的安装 下载路径: CUDA下载 `sudo dpkg -i cuda-repo-ubuntu1504-7-5-local_7.5-18_amd64.deb` `sudo apt ...
- DNS架设准备+申请领域查询授权
1. 架设DNS服务器首先我们得安装一下的软件[root@bogon ~]# rpm -qa | grep ^bindbind-libs-9.8.2-0.37.rc1.el6.i686 <==给 ...
- ucgui汉字库存放到外部的flash(控件可用)及写外部FLASH小软件
源:ucgui汉字库存放到外部的flash(控件可用)及写外部FLASH小软件 如何将ucgui的汉字库存放到外部的flash memory(ucgui)(汉字库)(外部flash) ucgui的字库
- linux 驱动入门3
不吃苦中苦,难为人上人.努力,给老婆孩子提供个良好的生活居住环境. http://www.cnblogs.com/nan-jing/articles/5806399.html 上文提到.可以自动创建了 ...
- (中等) UESTC 360 Another LCIS ,线段树+区间更新。
Description: For a sequence S1,S2,⋯,SN, and a pair of integers (i,j), if 1≤i≤j≤N and Si<Si+1<S ...