Блог

Главная - Вопросы по программированию - Angular.js createElement — это не создающий элемент

Angular.js createElement — это не создающий элемент

#angularjs

#angularjs

Вопрос:

Я делаю простой учебник и не могу пройти мимо очень простой вещи.

Я хочу создать элемент при загрузке страницы. Я точно следовал коду. Я использую Google Chrome. Что не так со следующим, что не создаст аудиоэлемент?:

index.html

 <!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body>

    <div ng-controller="PlayerController">
        <button ng-click="play()" class="button" ng-show="!playing">Play</button>
        <button ng-click="stop()" class="button alert" ng-show="playing">Stop</button>
        Playing audio: <b>{{ playing }}</b>
    </div>

  </body>
</html>

main.js (в указанном местоположении js/main.js )

 var app = angular.module('myApp', []);

app.controller('PlayerController', ['$scope', function($scope) {
  $scope.playing = false;
  $scope.div = document.createElement("div");
  $scope.audio = document.createElement('audio');
  $scope.audio.src = 'media/sample_mpeg4.mp4';
}]);

Вот как выглядит исходный код при проверке страницы:

 <!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body>

    <div ng-controller="PlayerController">
        <button ng-click="play()" class="button" ng-show="!playing">Play</button>
        <button ng-click="stop()" class="button alert" ng-show="playing">Stop</button>
        Playing audio: <b>{{ playing }}</b>
    </div>

  </body>
</html>

Как вы можете видеть, аудиоэлемент не создан. Я пробовал это с еще более простыми примерами, где я пытался просто добавить div.

Спасибо

Комментарии:

1. Вы создаете элементы, но нигде не добавляете их в тело.

2. @ZackArgyle, похоже, что на самом деле нет необходимости добавлять элементы для Angular. Я пошел дальше в руководстве, и в решении нет операторов добавления. Это точное наблюдение?

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

Ответ №1:

Несколько вещей:

  • Если вы хотите управлять DOM, лучше всего использовать директиву
  • angular.element(…) создает элементы для вас (используя jqLite), вам не нужно напрямую использовать функцию createElement.
  • Когда вы создаете элемент, вам нужно добавить его в DOM, иначе он не появится
  • Вы можете ввести $element в свой контроллер, но это не лучший шаблон для подражания

Вместо этого вы можете изучить этот способ:

 <div player-directive="media/sample_mpeg4.mp4"></div>

И создайте директиву

 app.directive('playerDirective', function() {
    return {
        restrict: 'A',
        template: '<button ng-click="play()" class="button" ng-show="!playing">Play</button><button ng-click="stop()" class="button alert" ng-show="playing">Stop</button>Playing audio: <b>{{ playing }}</b>',
        link: function (scope, element, attrs) {
             var audioSrc = attrs.playerDirective,
                 div = angular.element('<div/>'),
                 audio = angular.element('<audio/>')
                     .attr('src', audioSrc);

              element.append(div.append(audio));

              scope.isPlaying = false;

              scope.play = function () {};

              scope.stop = function () {};
        }
    };
}]);

В этом примере нам действительно было бы полезно иметь элемент and в шаблоне с помощью and scope.audioSrc = attrs.playerDirective в функции link .

Ответ №2:

хорошо, что это за учебник, в котором говорится о создании элемента DOM внутри контроллера? это слишком неправильно.

при этом создания элементов DOM в javascript недостаточно, вам нужно прикрепить элементы, чтобы они появились, вам нужно получить доступ к элементу, к которому вы хотите их прикрепить, скажем, к body, а затем вы делаете что-то вроде

   $scope.div = document.createElement("div");
  angular.element(document.getElementsByTagName('body')).append( $scope.div);

Комментарии:

1. это полезно, когда вы хотите принудительно загрузить диалоговое окно. Вы можете создать загрузку набора элементов <a> и присвоить ему атрибут href и щелкнуть по нему триггером. даже без добавления его в DOM.

2. именно тогда поступают директивы, и это должно быть сделано на этапе привязки. по крайней мере, так было 3 года назад, когда был дан этот ответ. контроллеры ЭТО неподходящее место для выполнения манипуляций с DOM. это всегда было работой директив.

3. вы правы, я пытался указать на ситуацию, когда это необходимо и не является неправильным. Если вы реагируете на какое-то сообщение WS принудительной загрузкой, вам нужно создать элемент <a> и нажать кнопку запуска (без добавления в DOM намного быстрее). Мне не нужен ответ, я только пытался разобраться в ситуации