Подтвердить что ты не робот

Добавить директивы из директивы в AngularJS

Я пытаюсь создать директиву, которая заботится о добавлении дополнительных директив к элементу, который он объявлен. Например, я хочу создать директиву, которая позаботится о добавлении datepicker, datepicker-language и ng-required="true".

Если я попытаюсь добавить эти атрибуты, а затем использовать $compile, я, очевидно, создаю бесконечный цикл, поэтому я проверяю, добавили ли я уже необходимые атрибуты:

angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function compile(scope, element, attrs) {
        if (element.attr('datepicker')) { // check
          return;
        }
        element.attr('datepicker', 'someValue');
        element.attr('datepicker-language', 'en');
        // some more
        $compile(element)(scope);
      }
    };
  });

Конечно, если я не $compile элемент, атрибуты будут установлены, но директива не будет загружена.

Является ли этот подход правильным или я делаю это неправильно? Есть ли лучший способ достичь такого же поведения?

UDPATE: учитывая тот факт, что $compile - единственный способ добиться этого, есть ли способ пропустить первый прогон компиляции (элемент может содержать несколько дочерних элементов)? Возможно, установив terminal:true?

ОБНОВЛЕНИЕ 2. Я попытался поместить директиву в элемент select, и, как и ожидалось, компиляция выполняется дважды, что означает, что в два раза больше ожидаемых option s.

4b9b3361

ОТВЕТЫ

Ответ 1

В случаях, когда у вас есть несколько директив для одного элемента DOM и где порядок, в котором они применяются, вы можете использовать свойство priority для заказа своих выражение. Сначала выполняются более высокие номера. Приоритет по умолчанию - 0, если вы не указали его.

EDIT: после обсуждения здесь представлено полное рабочее решение. Ключ был удалить атрибут: element.removeAttr("common-things");, а также element.removeAttr("data-common-things"); (в случае, если пользователи указывают data-common-things в html)

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, //this setting is important, see explanation below
      priority: 1000, //this setting is important, see explanation below
      compile: function compile(element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {  },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

Рабочий плункер доступен по адресу: http://plnkr.co/edit/Q13bUt?p=preview

Или:

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function link(scope,element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });

DEMO

Объяснение, почему мы должны установить terminal: true и priority: 1000 (большое число):

Когда DOM готов, angular идет по DOM, чтобы идентифицировать все зарегистрированные директивы и скомпилировать директивы один за другим на основе priority , если эти директивы находятся на одном и том же элементе. Мы устанавливаем приоритет нашей персонализированной директивы на большое количество, чтобы убедиться, что он будет скомпилирован сначала и terminal: true, остальные директивы будут пропущены после компиляции этой директивы.

Когда наша пользовательская директива компилируется, она будет изменять элемент, добавляя директивы и удаляя себя и используя службу компиляции $ скомпилировать все директивы (включая те, которые были пропущены).

Если мы не устанавливаем terminal:true и priority: 1000, существует вероятность того, что некоторые директивы будут скомпилированы до нашей специальной директивой. И когда наша настраиваемая директива использует компиляцию $, чтобы скомпилировать элемент = > снова скомпилировать уже скомпилированные директивы. Это вызовет непредсказуемое поведение, особенно если директивы, скомпилированные до нашей пользовательской директивы, уже изменили DOM.

Дополнительные сведения о приоритете и терминале см. Как понять` terminal` директивы?

Примером директивы, которая также модифицирует шаблон, является ng-repeat (priority = 1000), когда ng-repeat скомпилирован, ng-repeat делает копии элемента шаблона перед применением других директив.

Благодаря комментарию @Izhaki, вот ссылка на ngRepeat исходный код: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js

Ответ 2

Фактически вы можете обрабатывать все это с помощью простого тега шаблона. См. http://jsfiddle.net/m4ve9/ для примера. Обратите внимание: мне действительно не нужно свойство компиляции или ссылки в определении супер-директивы.

В процессе компиляции Angular извлекает значения шаблона перед компиляцией, поэтому вы можете прикреплять туда любые другие директивы, а Angular позаботится об этом для вас.

Если это супер директива, которая должна сохранять исходный внутренний контент, вы можете использовать transclude : true и заменить внутри на <ng-transclude></ng-transclude>

Надеюсь, что это поможет, дайте мне знать, если что-то неясно

Алекс

Ответ 3

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

Директива принимает массив объектов, каждый объект содержит имя добавляемой директивы и переданное ему значение (если есть).

Я изо всех сил пытался думать о прецеденте для такой директивы, пока не подумал, что было бы полезно добавить некоторую условную логику, которая добавляет только директиву, основанную на каком-то определенном состоянии (хотя приведенный ниже ответ все же надуман). Я добавил необязательное свойство if, которое должно содержать значение, выражение или функцию bool (например, определенную в вашем контроллере), которая определяет, следует ли добавлять директиву или нет.

Я также использую attrs.$attr.dynamicDirectives для получения точного объявления атрибута, используемого для добавления директивы (например, data-dynamic-directive, dynamic-directive) без строковых значений жесткого кодирования для проверки.

Plunker Demo

angular.module('plunker', ['ui.bootstrap'])
    .controller('DatepickerDemoCtrl', ['$scope',
        function($scope) {
            $scope.dt = function() {
                return new Date();
            };
            $scope.selects = [1, 2, 3, 4];
            $scope.el = 2;

            // For use with our dynamic-directive
            $scope.selectIsRequired = true;
            $scope.addTooltip = function() {
                return true;
            };
        }
    ])
    .directive('dynamicDirectives', ['$compile',
        function($compile) {
            
             var addDirectiveToElement = function(scope, element, dir) {
                var propName;
                if (dir.if) {
                    propName = Object.keys(dir)[1];
                    var addDirective = scope.$eval(dir.if);
                    if (addDirective) {
                        element.attr(propName, dir[propName]);
                    }
                } else { // No condition, just add directive
                    propName = Object.keys(dir)[0];
                    element.attr(propName, dir[propName]);
                }
            };
            
            var linker = function(scope, element, attrs) {
                var directives = scope.$eval(attrs.dynamicDirectives);
        
                if (!directives || !angular.isArray(directives)) {
                    return $compile(element)(scope);
                }
               
                // Add all directives in the array
                angular.forEach(directives, function(dir){
                    addDirectiveToElement(scope, element, dir);
                });
                
                // Remove attribute used to add this directive
                element.removeAttr(attrs.$attr.dynamicDirectives);
                // Compile element to run other directives
                $compile(element)(scope);
            };
        
            return {
                priority: 1001, // Run before other directives e.g.  ng-repeat
                terminal: true, // Stop other directives running
                link: linker
            };
        }
    ]);
<!doctype html>
<html ng-app="plunker">

<head>
    <script src="//code.angularjs.org/1.2.20/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div data-ng-controller="DatepickerDemoCtrl">

        <select data-ng-options="s for s in selects" data-ng-model="el" 
            data-dynamic-directives="[
                { 'if' : 'selectIsRequired', 'ng-required' : '{{selectIsRequired}}' },
                { 'tooltip-placement' : 'bottom' },
                { 'if' : 'addTooltip()', 'tooltip' : '{{ dt() }}' }
            ]">
            <option value=""></option>
        </select>

    </div>
</body>

</html>

Ответ 4

Я хотел добавить свое решение, так как принятый не работал у меня.

Мне нужно было добавить директиву, но также сохранить мой элемент.

В этом примере я добавляю к элементу простую директиву ng-style. Чтобы предотвратить бесконечные циклы компиляции и позволить мне сохранить мою директиву, я добавил проверку, чтобы увидеть, было ли то, что я добавил, перед повторной компиляцией элемента.

angular.module('some.directive', [])
.directive('someDirective', ['$compile',function($compile){
    return {
        priority: 1001,
        controller: ['$scope', '$element', '$attrs', '$transclude' ,function($scope, $element, $attrs, $transclude) {

            // controller code here

        }],
        compile: function(element, attributes){
            var compile = false;

            //check to see if the target directive was already added
            if(!element.attr('ng-style')){
                //add the target directive
                element.attr('ng-style', "{'width':'200px'}");
                compile = true;
            }
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {  },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    if(compile){
                        $compile(iElement)(scope);
                    }
                }
            };
        }
    };
}]);

Ответ 5

Попробуйте сохранить состояние в атрибуте самого элемента, например superDirectiveStatus="true"

Например:

angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function compile(scope, element, attrs) {
        if (element.attr('datepicker')) { // check
          return;
        }
        var status = element.attr('superDirectiveStatus');
        if( status !== "true" ){
             element.attr('datepicker', 'someValue');
             element.attr('datepicker-language', 'en');
             // some more
             element.attr('superDirectiveStatus','true');
             $compile(element)(scope);

        }

      }
    };
  });

Надеюсь, это поможет вам.

Ответ 6

От 1.3.x до 1.4.x произошло изменение.

В Angular 1.3.x это сработало:

var dir: ng.IDirective = {
    restrict: "A",
    require: ["select", "ngModel"],
    compile: compile,
};

function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) {
    tElement.append("<option value=''>--- Kein ---</option>");

    return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) {
        attributes["ngOptions"] = "a.ID as a.Bezeichnung for a in akademischetitel";
        scope.akademischetitel = AkademischerTitel.query();
    }
}

Теперь в Angular 1.4.x мы должны это сделать:

var dir: ng.IDirective = {
    restrict: "A",
    compile: compile,
    terminal: true,
    priority: 10,
};

function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) {
    tElement.append("<option value=''>--- Kein ---</option>");
    tElement.removeAttr("tq-akademischer-titel-select");
    tElement.attr("ng-options", "a.ID as a.Bezeichnung for a in akademischetitel");

    return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) {

        $compile(element)(scope);
        scope.akademischetitel = AkademischerTitel.query();
    }
}

(Из принятого ответа: fooobar.com/questions/33669/... от Khanh TO).

Ответ 7

Простым решением, которое может работать в некоторых случаях, является создание и компиляция оболочки, а затем добавление к ней исходного элемента.

Что-то вроде...

link: function(scope, elem, attr){
    var wrapper = angular.element('<div tooltip></div>');
    elem.before(wrapper);
    $compile(wrapper)(scope);
    wrapper.append(elem);
}

Это решение имеет то преимущество, что оно упрощает процесс, не перекомпилируя исходный элемент.

Это не сработает, если какая-либо из добавленных директив require из любой из исходных директив элементов или если исходный элемент имеет абсолютное позиционирование.