I have made a simple example with Angular.js directives for 'Celebrity Name'. I am reading about isolated scopes @,&,=, but I dont know how to use these in the following simple example to understand their usage and differences. Can someone help me out?
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<celebrity></celebrity>
<celebrity></celebrity>
<celebrity></celebrity>
<script>
//defining module
var app = angular.module('myApp',[]);
//defning Controller
app.controller('myCtrl',function($scope){
$scope.name = "Brad Pitt";
});
//defining directive
app.directive('celebrity',function(){
return{
restrict: 'E',
scope: {},
template: '<div>{{name}}</div>'
}
});
</script>
</body>
</html>
Result:
Currently all my 3 instances of directive 'celebrity' print 'Brad Pitt'.
Please, someone tell me how to use the 3 types of isolate scope in this simple example.
The 3 symbols, have different use :
@(read more) : allow you to pass a string from your current scope to the isolated one.html :
<div ng-controller="myCtrl">
<my-dir first-attr="Hello" second-attr="{{what}}"></my-dir>
</div>
js :
angular
.controller('myCtrl', function ( $scope ) {
$scope.what = 'World !'
})
.directive('myDir', function () {
return {
scope : {
firstAttr : '@',
secondAttr : '@'
}
controller : function ($scope, $log) {
$log.log($scope.firstAttr + ' ' + $scope.secondAttr); // logs : 'Hello World !'
}
};
});
= (read more) : allow you to pass an object that you can use and modify from the isolated scope.
The thing is, if you want to modify this object, never change directly the object itself or it will break the two way bindings
between your current scope and the isolated one and create two different copies of it (one in the current scope, and one in the isolated).
So just alter its properties to keep bindings unless is it what you want.html :
<div ng-controller="myCtrl">
<my-dir my-attr="helloWorld"></my-dir>
</div>
js :
angular
.controller('myCtrl', function ( $scope ) {
$scope.helloWorld = {
first : 'Hello',
second : 'World !'
};
})
.directive('myDir', function () {
return {
scope : {
myAttr : '='
}
controller : function ($scope, $log) {
$scope.myAttr.second = 'Space !';
$log.log($scope.myAttr.first + ' ' + $scope.myAttr.second); // logs : 'Hello Space !'
}
};
});
&(read more) allows you to call a function expression of your current scope from the isolated scope.html :
<div ng-controller="myCtrl">
<my-dir my-attr="helloWorld"></my-dir>
</div>
js :
angular
.controller('myCtrl', function ( $scope ) {
$scope.helloWhat = function ( what ) {
$log.log('Hello ' + what + ' !');
};
})
.directive('myDir', function () {
return {
scope : {
myAttr : '&'
}
controller : function ($scope, $log) {
$scope.myAttr('Angular'); // logs : 'Hello Angular !'
}
};
});