Angular directive scope is empty

Question

I have a Directive:

var ActorDisplayDirective = function() {
    return {
        replace : false,
        restrict : 'AE',
        scope : {
            actor : "="
        },
        templateUrl: staticContext + '/angular-app/templates/actor-display-template.html',
        link : function(scope, elem, attrs) {

        },

    }
};

This works fine in some places, but not others. Here is my code to show it where it is not working:

  <p>CAP: {{can_approve_for}}</p>
  <p>
Actor display template: 
<span actor-display actor='can_approve_for'></span>
After template
  </p>

The CAP: ... displays the data, the directive's actor value is null. Why? My controller does:

dataFactory.getCanApproveFor().then(function(data) {
$scope.can_approve_for = data;
});

So, I am able to see the value on the page, but the directive does not show it. I'm assuming it's a timing/refresh thing, but this directive works elsewhere in ng-repeat , because the ng-repeat evaluates after hte object is already set, I guess. How do I do it in this case?

Answer 1

You are not actually declaring ActorDisplayDirective as a directive. Its just a plain function that returns an object that sort of looks like a directive.

You have to tell angular that it is a directive like so:

angular.module('someModule', [])
    .directive('actorDisplay', function () {
        return {
            replace: false,
            restrict: 'AE',
            scope: {
                actor: "="
            },
            templateUrl: staticContext + '/angular-app/templates/actor-display-template.html',
            link: function (scope, elem, attrs) {

            },
        }
    })