angular.module("manuais", []);
angular.module("manuais").controller("manualCtrl", function($scope) {
$scope.capitulo_itens = [{
cod: 1,
cod_capitulo: 1,
tipo: 1,
texto: "Titulo de um elemento",
arquivo: ""
}, {
cod: 2,
cod_capitulo: 1,
tipo: 2,
texto: "SubTitulo de um elemento",
arquivo: ""
}, {
cod: 3,
cod_capitulo: 1,
tipo: 1,
texto: "Titulo de um elemento",
arquivo: ""
}, {
cod: 4,
cod_capitulo: 1,
tipo: 2,
texto: "SubTitulo de um elemento",
arquivo: ""
}];
$scope.limpaItens = function() {
$scope.capitulo_itens = [];
$(".elemento").remove();
};
$scope.insereItens = function() {
$scope.capitulo_itens = [];
$(".elemento").remove();
array = [{
cod: 1,
cod_capitulo: 1,
tipo: 1,
texto: "Titulo de um elemento",
arquivo: ""
}, {
cod: 2,
cod_capitulo: 1,
tipo: 2,
texto: "SubTitulo de um elemento",
arquivo: ""
}, {
cod: 3,
cod_capitulo: 1,
tipo: 1,
texto: "Titulo de um elemento",
arquivo: ""
}, {
cod: 4,
cod_capitulo: 1,
tipo: 2,
texto: "SubTitulo de um elemento",
arquivo: ""
}];
$scope.capitulo_itens = array;
};
});
//diretiva que gera os elementos de acordo com seu tipo
angular.module("manuais").directive("uiElemento", function($compile) {
function link($scope, element, attributes) {
var modelo = getTemplate( $scope.elemento.tipo);
element.replaceWith($compile(modelo)($scope));
};
var getTemplate = function(contentType) {
var templateLoader,
templateMap = {
1: "<h1 class='elemento' ng-click='selecionaElemento(elemento)'>{{elemento.texto}}</h1>",
2: "<h2 class='elemento' ng-click='selecionaElemento(elemento)'>{{elemento.texto}}</h2>",
3: "<p class='elemento' ng-click='selecionaElemento(elemento)'>{{elemento.texto}}</p>",
4: "<div class='elemento img_container' ng-click='selecionaElemento(elemento)'><img class='figura' ng-src='{{elemento.arquivo}}'/><p>imagem</p></div>",
5: "<div class='elemento img_container' ng-click='selecionaElemento(elemento)'><img class='figura' ng-src='{{elemento.arquivo}}'/><p>imagem</p></div>"
},
templateLoader = templateMap[contentType]
return templateLoader;
};
return ({
link: link,
restrict: "E"
});
});h1 {
font-size: 14px;
}
h2 {
font-size: 13px;
}
#debug {
background-color: #e2e2e2;
}<html ng-app="manuais">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body ng-controller="manualCtrl">
<button ng-click="insereItens()">Preencher</button>
<button ng-click="limpaItens()">Limpar</button>
<div id="corpo">
<ui-Elemento ng-repeat="elemento in capitulo_itens">{{elemento.texto}}</ui-Elemento>
</div>
<div id="debug">
{{ capitulo_itens }}
</div>
</body>
</html>I created a directive that receives the contents of the db and generates an element in html during my ng-repeat.
This directive works perfectly when there is content, after that, if I clean my array "capitulo_itens" the screen still remains with the previous content. This happens only if the array is empty, but if I populate it again the policy works and generates the content normally.
Thank you in advance!
UPDATE: The problem occurred because the policy only locked the elements, but did not remove those that had been inserted previously. According to the code, I used $ ('.element'). Remove (); to clear previous content;