Angular.js createElement is not creating element

Question

I'm doing a simple tutorial and cannot get past a very simple thing.

I want to create an element on page load. I've followed the code exactly. I'm using Google Chrome. What is wrong with the following that will not create the audio element?:

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 (in the referenced location 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';
}]);

This is what the source looks like upon page inspection:

<!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>

As you can see the audio element is not created. I tried this with even simpler examples where I tried to just add a div.

Thanks

You create the elements, but do not append them to the body anywhere. — Zack Argyle
– Zack Argyle, Commented Jun 23, 2014 at 19:48
@ZackArgyle, It appears that it's not necessary to actually append elements for Angular. I went further in the tutorial and the solution has no append statements. Is this an accurate observation? — Joe Essey
– Joe Essey, Commented Jun 23, 2014 at 19:57
this is not an angular thing this is a javascript thing. elements can be created in javascript w/o ever being rendered, so if you want it to make it visible you need to attach it to some DOM element. — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Jun 23, 2014 at 20:00

Thomas Roch · Accepted Answer · 2015-05-05 15:59:33Z

Few things:

If you want to manipulate the DOM, it is best to use a directive
angular.element(...) creates elements for you (using jQlite), you don't need to use the createElement function directly.
When you create an element, you need to add it to the DOM otherwise it won't appear
You can inject $element in your controller, but this is not the best pattern to follow

Instead, you can explore this way:

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

And create a directive

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 () {};
        }
    };
}]);

In this example, we would actually benefit of having the and element in the template with and scope.audioSrc = attrs.playerDirective in the link function.

Dayan Moreno Leon · Accepted Answer · 2014-06-23 19:58:44Z

1

ok what tutorial is this that is telling you to create a DOM element inside a controller? thats way too wrong.

that being said, creating DOM elements in javascript is not enough you need to attach the elements in order for them to appear you'll have to get your hands on the element you want to attach them to lets say is body and then you do something like

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

answered Jun 23, 2014 at 19:58

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

3 Comments

Eduard Void Over a year ago

it is usefull when you want to force download dialog. You can create <a> element set download and href attribute to it and trigger click on it. even without adding it to the DOM.

Dayan Moreno Leon Over a year ago

that is when directives come in and it should be done on the binding stage. at least that is the way it was 3 years ago when this answer was given. controllers IT IS NOT the right place to do DOM manipulations. that was always the directives work.

Eduard Void Over a year ago

you are right, I was trying to point out the situation when this is needed and is not wrong. If you react for some WS message with forced download, you need to create <a> element and trigger click (without adding to the DOM is much faster). I don't need anwser, only was trying to figure out the situation

Collectives™ on Stack Overflow

Angular.js createElement is not creating element

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related