CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Tiago
Tiago

Reputation: 4480

Angular directive "=" value binds to scope, but is undefined?

I have defined the following directive inside my Angular app:

(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() {
//
//     }
// }
})();

It is to be used as an element that receives either an operation or project value as well as a clearance value, which will then be used whether said element will render (I omitted that part but it's functionality is basically the same as ng-if).

Here's an example of it in use:

<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>

What's happening though, is that even though vm.project is indeed defined, that console.log($scope.project); yields undefined. Interestingly, if I simply console.log($scope); it will contain a project property with the information I need. What am I doing wrong?

I actually only need the project's id value, so I can either pass in the entire project object and access its id within the directive, or somehow pass the id number alone.

Upvotes: 0

Views: 319

Answers (1)

varun
varun

Reputation: 662

When your directive's link function starts executing, vm.project is undefined at that point. Set a watch on $scope.project.

Inside Directive:

$scope.$watch('project', function (newValue, oldValue) {
    if (newValue) {
        // do stuff
    }
});

Upvotes: 2

Related Questions