指令上的未知提供程序错误

Question

I am receiving an unknown provider error on a directive I made. I just began learning about directives so I apologize in advance if I made a very obvious mistake.

The directive is supposed to create an element it creates using a factory.

The div causing the error:

<div annotation-display tree="{{tree}}"></div>

The directive that angular cannot find:

angular.module('trees').directive('annotationDisplay', ['annotationFactory', function(annotationFactory) {
    return {
        restrict: 'E',
        scope: {
            tree: '=tree'
        },
        transclude: true,
        compile: function(element, attrs)
        {
            var htmlText = annotationFactory.createAnnotationHtml(tree);
            element.replaceWith(htmlText);
        }
    };
}]);

The factory:

angular.module('trees').factory('annotationFactory', ['', function() {
    var factory = {};
    factory.createAnnotationHtml = function(tree) {
        console.log("in");
        var out = "<p>";
        d3.tsv.parseRows(tree.data, function(data) {
            var previousNERTag = "";
            for (var row in data) {
                var wordData = data[row];
                var NERtag = wordData[7].substring(wordData[7].length,3);
                if (previousNERTag != NERtag) {
                    previousNERTag = NERtag;
                    if (NERtag === "")
                        out+="</span>";
                    if (NERtag === "PER") 
                        out+='<span class="Person">';
                    if (NERtag === "ORG")
                        out+='<span class="Organization">';
                    if (NERtag === "LOC")
                        out+='<span class="Location">';
                }
            }
            out+='</p>';
        });
        return out;
    };

    return factory;
}]);

I loaded the trees module in the main app and its definitely there because my controller in trees is working fine.

Solved,

.factory('annotationFactory', ['', function() { to angular.module('trees').factory('annotationFactory', function() {

Answer 1

restrict: 'E' Means your directive is an element. restrict: 'EA' Means your directive would be an element or an attribute. As you are using it with div it works as an attribute. If you want to use it as element then change

<div annotation-display tree="{{tree}}"></div>

to

<annotation-display tree="{{tree}}"></annotation-display>