Блог

Каков правильный способ вставки элемента в DOM с помощью angular.element() ?

 app.directive('validationTest', function(){
            return {
                restrict: 'A',
                replace: false,                 
                link: function(scope, element, attrs){
                    scope.call = function(){
                        console.log('Someone clicked it');
                    };

                    var newElement = angular.element('<span ng-click="call()">').text('Yo Yo');
                    element.append(newElement);
                }
            };
        });
  

В этом коде я пытаюсь добавить элемент span в элемент, к которому была применена директива. Я могу добавить этот элемент span в качестве дочернего элемента родительского div, для которого вызывается метод добавления.

Однако, как вы можете видеть в коде, a ng-click также был связан с этим промежутком. Я знаю, что это бесполезно ни с какой точки зрения, это просто для демонстрации. Итак, обычно при нажатии на этот промежуток в консоли должна быть напечатана строка. Однако этого не происходит.

Чего мне здесь не хватает? Я использовал неправильный подход для этого добавления или в моем коде есть какая-то ошибка?

Если HTML-код, который вы динамически добавляете в DOM, содержит директивы, то вам нужно будет $compile и связать его перед добавлением в DOM:

  var newElement = angular.element('<span ng-click="call()">').text('Yo Yo');
 $compile(newElement)(scope);
 element.append(newElement);
  

Альтернативный подход, который менее подвержен ошибкам, заключается в переносе ваших манипуляций с DOM в функцию компиляции. При вставке нового элемента на этапе компиляции новый HTML-код будет автоматически связан на этапе компоновки (ручная компиляция / ссылка не требуется):

 app.directive('myDirective', function() {
     return  {
         compile: function(element, attr) {
              var newElement = angular.element('<span ng-click="call()">').text('Yo Yo');
              element.append(newElement);
              return function(scope, element, attr) {
              }
         }
     }
});
  

Вам не хватает компиляции angular. Компиляция обходит ваш DOM в поисках директив и инициализирует их. Без вызова compile ничто не инициализирует ваш ngClick . Попробуйте использовать $compile:

 app.directive('validationTest', ['$compile', function($compile){
        return {
            restrict: 'A',
            replace: false,                 
            link: function(scope, element, attrs){
                scope.call = function(){
                    console.log('Someone clicked it');
                };

                var newElement = angular.element('<span ng-click="call()">').text('Yo Yo');
                element.append(newElement);
                $compile(element)(scope);
            }
        };
    });
  

Для получения дополнительной информации: https://docs.angularjs.org/api/ng/service /$компиляция

Лучше использовать templateUrl или template .

Просмотрите документы $compile .