An Angular directive has been defined within my application:
(function() {
'use strict';
angular
.module('almonds')
.directive('security', ['$animate', 'AuthFactory', directive]);
function directive($animate, AuthFactory) {
var directive = {
restrict: 'EA',
scope: {
operation: "@",
clearance: "@",
project: "="
},
link: linkFunc
};
return directive;
function linkFunc($scope, $element, $attr, ctrl, $transclude) {
var block, childScope, previousElements;
console.log($scope.project);
if($scope.project) {
var projectId = $scope.project.id;
}
var operation = $scope.operation;
var clearance = $scope.clearance;
if (projectId) {
var value = AuthFactory.hasProjectAccess(projectId, clearance);
console.log('PROJECT SECURITY:', projectId, clearance, value);
} else {
var value = AuthFactory.hasAccess(operation, clearance);
console.log('ORG SECURITY:', operation, clearance, value);
}
}
}
// Controller.$inject = ['$scope'];
//
// function Controller($scope) {
// var vm = this;
//
// activate();
//
// function activate() {
//
// }
}
})();
This directive is used as an element that accepts either an operation or project value along with a clearance value to decide whether the element should render. An example of its usage is shown below:
<span security project="vm.project" clearance="admin">
<a role="button" ng-click="vm.confirmDeletion();"><span class="melon-icon-md melon-icon-trash"></span></a>
</span>
The issue arises when trying to access $scope.project, which returns undefined, even though vm.project is defined. However, when logging $scope itself, it does contain a project property with the required information. What could be causing this inconsistency?
Only the id value of the project is needed, so either the entire object can be passed and accessed within the directive for the id, or just the id number alone can be passed somehow.