As I delve into the world of Angular directives, the concept of scope is proving to be quite challenging for me. Let's consider a custom directive named parentDirective, which has both a controller property and a link property:
angular.module("app").directive("parentDirective", function () {
return {
restrict: "E",
templateUrl: "dirs/parent.html",
scope:{
character: "="
},
controller: function ($scope) {
$scope.getData = function (data) {
console.log(data);
}
},
link: function (scope,elem, attrs) {
elem.bind("click", function (e) {
//retrieve object here?
});
scope.getData = function (data) {
console.log(data);
}
}
}
});
The template for this directive looks like this:
<p ng-click="getData(character)">
{{character.name}}
</p>
In this scenario, I can access the character object within the controller function using $scope, and in the link function using scope. But what exactly sets these two methods apart? Furthermore, I'm curious if it's possible to bind a click event to the directive in order to retrieve the object like so:
elem.bind("click", function (e) {
//retrieve object here?
});