<html lang="en" ng-app="Demo">
<head>
<meta charset="utf-8">
<title>Directive Html</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('Demo', [], angular.noop);
app.directive('ysBlock', function(){
return {
compile: angular.noop,
template: '<div style="width: 200px; border: 1px solid black;">'+
'<h1 style="background-color: gray; color: white; font-size: 22px;">{{ title }}</h1>'+
'<div>{{ text }}</div>'+
'</div>',
replace: false,
scope: {
title: '@titlearr', //directive里面的title取值为element属性titlearr的动态的值{{title}}
text: '=textarr'//directive里面text的取值为element属性textarr的值text在element中scope中的值，scope.text
},//这里的=title其实用的是
restrict: 'E'
};
});
app.controller('TestCtrl', function($scope){
$scope.title = '标题在这里';
$scope.text = '内容在这里';
});
angular.bootstrap(document, ['Demo']);
</script>
</head>
<body>
<div ng-controller="TestCtrl">
<ys-block titlearr="{{title}}" textarr="text"></ys-block>
<p>标题: <input ng-model="title" /></p>
<p>内容: <input ng-model="text" /></p>
<span>{{title}},{{text}}</span>
</div>
</body>
</html>
<html lang="en" ng-app="Demo">
<head>
<meta charset="utf-8">
<title>Directive Html</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
//&attr 是包装一个函数出来，这个函数以节点所在的 scope 为上下文这里是一个上下文交错的环境，通过 & 这种机制，让指令的 scope 与节点的 scope 发生了互动
var app = angular.module('Demo', [], angular.noop);
app.directive('a', function(){
var func = function(element, attrs, link){
return function llink(scope){
console.log(scope);
scope.a(); // 执行了here = here + 1 所以虽然TestCtrl设置here为123，页面上最终的here为124
scope.b(); // 执行了TestCtrl的show()
scope.show = function(here){// ----点击是执行link里面的show(here)与TestCtrl无关
console.log('Inner, ' + here);
scope.a({here: 5});// ---- 但是此处的scope.a({here: 5})，因为a执行的是TestCtrl的上下文，于是a传递的一个对象，里面的所有属性
//TestCtrl就全收下了，接着执行here = here+1，所以会显示6
}
}
}
return {
compile: func,
scope: {
a: '&abc', //scope.a是&abc 即：scope.a = function() {here = here +1;} here是TestCtrl的
b: '&ngClick'//scope.b是&ngClick 即：scope = function() {show(here);} 这里的show()和here都是TestCtrl的
},
restrict: 'A'
};
});
app.controller('TestCtrl', function($scope){
$scope.here = 123;
console.log($scope);
$scope.show = function(here){
console.log(here);
}
});
angular.bootstrap(document, ['Demo']);
</script>
</head>
<body>
<div ng-controller="TestCtrl">
<div a abc="here = here + 1" ng-click="show(here)">这里</div>
<div>{{ here }}</div>
</div>
</body>
</html>
