0
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>
<script src="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 takes the db content and generates an html element during my ng-repeat.
This directive works perfectly when there is content, after that if I clear my array "capitulo_items" the screen still remains with the previous content. This happens only if the array is empty, but if I fill it again the directive works and generates the content normally.
Thank you in advance!
UPDATING: The problem occurred because the directive only stopped the elements, but did not remove the ones that had been inserted previously. According to the code, I used $('.element'). remove(); to clear the previous content;
Your directive is called
uiElementohas to be used all in lowercase, separating words by hyphen. The correct would beui-elemento. Just making it clear I don’t know if that’s your problem, but it’s the right one.– Gabriel Câmara
Hello Gabriel Câmara, thanks for the tip. As I said, the problem only happens when my array that is the source of this information is empty.
– Dannicléo Teles
On the line
element.replaceWith( $compile(modelo)($scope)is missing a parenthesis. Also, do you get any error in the browser console? If yes, let us know.– Gabriel Câmara
Sorry, during the solution attempts I ended up deleting the parenthesis and did not see when posting. Fixed!
– Dannicléo Teles