angular : direative : scope | 指令scope里的符号@，=
先看看以下的代码
<body ng-app="app" ng-controller="ctrl">
<dir myname="name"></dir>
<script src="js/angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
//scope.name = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "=myname"
}
}
});
</script>
</body>
以上 ^ : 一开始会显示ABC，2秒后会显示XYZ。*外面可以同步内部
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
//$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "=myname"
}
}
});
以上^ : 开始显示ABC，3秒后显示XYZ。*内部可以同步外部
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
//scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "@myname"
}
}
});
以上^ : 开始显示name，3秒后显示name。*内部的符号“@”只能拿到string
<body ng-app="app" ng-controller="ctrl">
<dir myname="{{name}}"></dir>
<script src="js/angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
//scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "@myname"
}
}
});
</script>
</body>
以上 ^ : 一开始会显示ABC，2秒后会显示XYZ。*外面可以同步内部，同时注意div里是使用{{}}的表达式
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
//$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "@myname"
}
}
});
以上 ^ : 一开始会显示ABC，2秒后会显示XYZ。*内面可以同步外部，同时注意div里是使用{{}}的表达式
angular : direative : scope | 指令scope里的符号@，=的更多相关文章
- angular : direative : scope | 指令scope和transclude的关系
今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- angular : direative ：comunication 指令之间的通讯
在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个na ...
- angularJS1笔记-(14)-自定义指令(scope)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- AngularJS 全局scope与指令 scope通信
在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...
- Angular的自定义指令以及实例
本文章已收录于: AngularJS知识库 分类: javascript(55) http://www.cnblogs.com/xiaoxie53/p/5058198.html 前面的文章介 ...
- Angular内置指令（二）
目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...
随机推荐
- 一段神奇的代码-关于PHP字符变量奇怪现象的解释
首先神奇的PHP是支持字符数据类型的,有同学就写了这样一段代码: for ($c = 'a'; $c <= 'z'; $c++) { echo $c . ' '; } 然而结果却不是他想要的a到 ...
- Spark中的键值对操作
1.PairRDD介绍 Spark为包含键值对类型的RDD提供了一些专有的操作.这些RDD被称为PairRDD.PairRDD提供了并行操作各个键或跨节点重新进行数据分组的操作接口.例如,Pa ...
- html块级元素和内联元素区别详解
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
- iOS 之 UIStackView
UIStackView是iOS9新推出的布局控件,它的出现,可以说颠覆了以往的布局方式. 问题时,如果我使用UIStackView,它能用在iOS7.8系统中吗? 我要测试一下.测试程序我放到gith ...
- [c#]解决方案：需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping。
问题详情 如下图所示(部分): 出现该错误,是因为应用程序中需要使用到jquery(现在的web应用程序哪个能离开jquery呢),而目前程序目录中并没有jquery文件,或者有jquery文件但是程 ...
- XML解析之SAX解析技术案例
Java代码: package com.xushouwei.xml; import java.io.File; import java.io.IOException; import java.text ...
- jquery换肤
<script src="script/jquery-2.1.0.js"></script> <link href="style/ ...
- Activity的生命周期与加载模式——Activity的4种加载模式
配置Activity时可指定android:launchMode属性,该属性用于配置该Activity的加载模式,该属性支持如下4个属性值. standard:标准模式,这是默认的加载模式. sing ...
- 交叉验证（cross validation）
转自:http://www.vanjor.org/blog/2010/10/cross-validation/ 交叉验证(Cross-Validation): 有时亦称循环估计, 是一种统计学上将数据 ...
- SVN官方版本下载地址
TortoiseSVN 客户端 & Language packs 语言包 : https://tortoisesvn.net/downloads.html VisualSVN 插件官方地址: ...