My Objective:
I aim to utilize directives for creating custom elements and dynamically inserting them into the view at various points in time.
The Challenge:
Upon dynamically adding custom elements to the view, they appear as raw HTML without the directive updating them as expected.
For Example:
Consider a custom element -> <ell></ell>. When I manually input <ell></ell> in the HTML, the directive functions correctly by generating 4 divs, each with the 'block' class. For instance ->
<div class="block"></div>However, when I define the inner HTML of a div ->
<div id="level" ng-bind-html="piecesInPlay"></div><ell></ell> tag.
Below is the relevant code snippet:
Angular Directives: (a directive for each element in scp.pieces[] array)
app.directive('sqr', function() {
return {
restrict: 'E',
template: tetris.templateString,
link: tetris.randColor
};
});
Angular Controller:
app.controller('levelCtrl', ['$scope', function(scp) {
scp.pieces = ['<ell></ell>', '<r-ell></r-ell>', '<sqr></sqr>', '<zee></zee>', '<r-zee></r-zee>', '<tee></tee>', '<line></line>'];
scp.piecesInPlay = '<ell></ell>';
scp.generateNewPiece = function() {
var min = 0, max = 6;
var randPiece = Math.floor(Math.random() * (max - min + 1)) + min;
scp.piecesInPlay += scp.pieces[randPiece];
return scp.pieces[randPiece];
};
// generates a random piece and adds it to the pieces in play
scp.generateNewPiece();
}]);
HTML:
<div id="level" ng-controller="levelCtrl" ng-bind-html="piecesInPlay">
</div>