Угловая директива фабрики только называется один

Question

Мы сейчас переходим к Google Closure Compiler. Мы рефакторинг нашей старого кода базы поэтому его подгонка к этой статье: A radical new approach to developing AngularJS apps

директивы должна выглядеть следующим образом:

/** 
* @constructor 
*/ 
var Directive = function(version) { 
    this.version = version; 
    this.link = this.link.bind(this); 

    this.scope; 
    this.elem; 
    this.attrs; 
}; 

/** 
* Version directive factory. Entry point and used in `module.directive`. 
*/ 
Directive.factory = function(version) { 
    var dir = new Directive(version); 
    return { 
    link: dir.link 
    }; 
}; 

/** 
* Linking function. 
*/ 
Directive.prototype.link = function(scope, elem, attrs) { 
    this.scope = scope; 
    this.elem = elem; 
    this.attrs = attrs; 
    this.elem.text(this.version.get()); 
}; 

angular.module('app', []) 
    .directive('version', Directive.factory); 

Все работает отлично, пока мы не используем директиву несколько раз на сайте. Directive.factory будет вызываться только один раз. Таким образом, все директивы на сайтах имеют один и тот же объект Directive. Мы не понимаем, почему это происходит.

Answer 1

An Angular service is a singleton object created by a service factory. И поэтому объекты DDO - это одноэлементные массивы, созданные из объектов, возвращаемых directive factory functions (директивы оказываются службами под капотом). После того, как была вызвана фабричная функция (Directive.factory в вашем случае), ее результат кэшируется как служебный экземпляр versionDirective.

После того, как вы знаете, как именно Угловая treats compile and link functions, это может быть возможным трюк, как это:

Directive.factory = function(version) { 
    return { 
    compile: function() { 
     var dir = new Directive(version); 
     // by default there is no 'this' in link 
     return angular.bind(dir, dir.link); 
    } 
    }; 
}; 

И я рекомендовал бы против этого, если вы не знаете, что вы делаете очень хорошо. Это не поможет тестированию, а также не может быть изменено, или что-то еще, но будет злоупотреблять каркасом.

«Радикальный новый подход» может быть или не быть полезным, но он, конечно же, не подразумевает подобные вещи.

Answer 2

Я изменил ваш пример, чтобы отразить тот факт, что конструктор Directive является одноэлементным, который является общим.

/** 
* @constructor 
*/ 
var Directive = function(version) { 
    this.version = version; 
}; 

/** 
* Version directive factory. Entry point and used in `module.directive`. 
*/ 
Directive.factory = function(version) { 
    return new Directive(version); 
}; 

/** 
* Linking function. 
*/ 
Directive.prototype.link = function(scope, elem, attrs) { 
    // this refers to the Directive singleton - it's shared between 
    // multiple invocations. 
    elem.text(this.version.get()); 
}; 

angular.module('app', []) 
    .directive('version', Directive.factory); 

Если вы хотите, поведение, которое вы изначально были нацелены на, вы можете изменить ваш метод ссылки построить объект:

/** 
* Linking function. 
*/ 
Directive.prototype.link = function(scope, elem, attrs) { 
    // This will be created everytime the template is cloned 
    var versionDirective = new VersionDirectiveLink(scope, elem, attrs); 
    versionDirective.setText(this.version.get()); 
}; 

Этот последний вариант создает объект каждый раз, когда шаблон клонирован. Таким образом, вы можете поддерживать более продвинутое поведение с помощью конструкторов.