Tengo un pequeño error en uno de mis scripts trabajando con el dom y angular
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="elementController">
<div id="testDiv">
<p>error de angular</p>
<p>{{name}}</p>
<p>error de angular</p>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('elementController', ['$scope', '$document',
function($scope, $document) {
$scope.name = "LearnKode";
var element = angular.element($document[0].querySelector('#testDiv'))
element.append("<h2>Append</h2>");
element.prepend("<h2>Prepend</h2>");
}
]);
</script>
Observen los tres elementos <p>
del html donde pongo "error de angular". No me compila la variable name
por encontrarse dentro de las etiquetas que manipulo con angular, sin embargo si saco fuera del div el 'p' del medio donde dice 'name', entonces si me funciona, me parece una cosa extraña, no?. Observen incluso que el primer 'p' no lo ejecuta. ¿no les parece raro señores de angular?