I am absolutly new in AngularJS and I am study it on a course. I have some doubt on an example that show how to use the isolation scope concept.
So the provided example is a single page application that contain this app.js file that contain all the application logic:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.person = {
name: 'John Doe',
address: '555 Main St., New York, NY 11111'
}
}]);
myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
}]);
/* Declare a directive named "searchResult" */
myApp.directive("searchResult", function() {
return {
restrict: 'AECM', // This represent the ways to declare the directive into my code
templateUrl: 'directives/searchresult.html', // This is the template page that implement the directive
replace: true, // This specify that the directive in the main HTML code is replaced by the template code
/* This isolate the directive scope (the model of the directive) from its parent scope (the controller that handle the page in which
the directive is used). Because I can't directly use the person.name and the person.address property declared in the parent scope I
specify that I use the person-name and the person-address passed as custom attribute of the search-result directive where it is used (in the main.html)
*/
scope: {
personName: "@",
personAddress: "@"
}
}
});
This is the main.html page that is where the search-result directive is used:
Search
<h3>Search Results</h3>
<div class="list-group">
<search-result person-name="{{ person.name }}" person-address="{{ person.address }}"></search-result>
</div>
And this is the code of the searchResult.html that is the template of my directive:
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">{{ personName }}</h4>
<p class="list-group-item-text">
{{ personAddress }}
</p>
</a>
So, from what I have understand (but correct me if I am doing wrong assertion) the scope isolation works in the following way:
To avoid problem I can isolate the scope of a child directive by its parent scope (for example the controller of the main page).
To do it I have simply to insert a scope JSON object into the directive JavaScript declartation:
scope: {
.............
.............
.............
}
But now from my directive I can't directly access no more to the name and address properties declared in the parent scope (the controller scope).
So if I have to use these value I declare the isolated directive scope object in this way:
scope: {
personName: "@",
personAddress: "@"
}
that means that the personName property have the textual value of the person-name declared in the search-result HTML declaration (and the dame thing for the personAddress, infact in my main.hml file I have
<search-result person-name="{{ person.name }}" person-address="{{ person.address }}"></search-result>
and from here I can directly access to the person.name and to the person.address because here I am using the controller scope (the parent scope)
So now in my JavaScript directive I obtained these values into the personName and personAddress property of the isolated child scope object and in my directive template I access to these properties, in this way:
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">{{ personName }}</h4>
<p class="list-group-item-text">
{{ personAddress }}
</p>
</a>
Is it my reasoning correct or am I missing something?
