Это несовсем демка, это небольшой опыт показывающий изоляцию scope. Если кто то собирается писать на ангуляре это одна из базовых вещей которую вы обязаны понимать.
есть три директивы experement1, experement2, demo
experement1 и experement2 вложены в demo
у каждой директивы свой scope
experement 1 имеет полный доступ к scope demo
experement 2 имеет доступ только к одному параметру родительского scope и какой это именно будет параметр определяется через атрибут param1
эксперементы кликабельны
а главный scope можно сбросить.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
//Обьявим модуль
var myApp=angular.module('myApp', []);
//создадим дерективу
myApp.directive('test',function(){
return {
restrict:"E",
scope:{},
controller:function($scope){
$scope.reset=function(){
$scope.test1='root scope';
$scope.test2='root scope';
}
$scope.reset();
}
}
});
// первый эксперемент 1
// имеет полный доступ к родительскому scope (так как нет scope:{} )
myApp.directive('experement1',function(){
return {
restrict:"E",
controller:function($scope,$element){
$element.bind('click',function(){
$scope.test1="experement1";
$scope.test2="experement1";
$scope.$apply();
})
$scope.$watch ( function(){
//alert('test1='+$scope.test1 +' test2='+ $scope.test2);
});
}
}
});
// эксперемент 2
// имеет доступ только к однуму из свойств родительского scope, свойство будет доступен через param1
myApp.directive('experement2',function(){
return {
restrict:"E",
scope:{
//через param1 будет устанавливаться связь с родительским scope
param1:"="
},
controller:function($scope,$element){
$element.bind('click',function(){
$scope.param1="experement2";
$scope.test2="experement2";
$scope.$apply();
})
$scope.$watch ( function(){
//alert('param1='+$scope.param1 +' test2='+ $scope.test2);
});
}
}
});
</script>
</head>
<body >
<test>
<experement1 >
{{'test1="'+test1 +'" test2="'+ test2+'"'}}
</experement1>
<br/><br/>
<experement2 param1="test1" >
{{'param1="'+param1 +'" test2="'+ test2+'"'}}
</experement2>
<br/><br/>
<button ng-click="reset()">reset</button>
</test>
</body>
</html>
в двух словах что вы видите.
experement1 полность отображает то что содержится в родительском scope
при клике он поменяет содержимое родительский scope
изменение родительского scope повлияет только на param1 из experement2
experement2 отображает только один из параметров test1 родительского scope, при помощи param1
при клике он поменяет только test1
изначально test2 пуст так как он несвязан с родительским scope
если в test2 будет установлено значение то оно не как не будет связано с родительским scope, тоесть свойство будет принадлежать именно scope experement2