Why does null-repeat of AngularJS not work in Bootstrap Modal?

Question

Why does null-repeat of AngularJS not work in Bootstrap Modal?

Navigation

#1 by (0 votes)

0

In my project, I've used a nesting of ng-repeat to mount multiple checkbox dynamically, allowing the user to merge filters , which works perfectly < in> controller loads the lists.

Now, the user asked to place these filters within a modal , but apparently ng-repeat does not work within the modal. Why does this happen?

I'm not asking for alternative solutions like using ui.bootstrap and inject modal of the angle itself. I really want to know why it does not work with modal natively.

Does% Bootstrap% eliminate tags containing javascript or something like this? Am I using it the wrong way?

Here is an example of my ng-repeat :

        <!-- SEPARATED MODAL BODY - WORKS -->
        <div ng-repeat="campo in camposFiltradosMotorista">
            <div ng-repeat="tipo in tiposMotorista[campo]" class="checkbox checkbox-primary" class="styled">
                <strong>
                    <input id="motorista{{tipo}}" type="checkbox" ng-model="tiposMotoristaSelecionados[campo][tipo]" />
                    <label for="motorista{{tipo}}">
                        {{tipo}} - ({{ (motoristasFiltrados | filter:count(campo, tipo)).length }})
                    </label>
                </strong>
            </div>
            <hr ng-if="!$last" />
        </div>

        <div class="modal inmodal" id="filtro-modal-motoristas" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <i class="fa fa-laptop modal-icon"></i>
                        <h4 class="modal-title">Filtros de Motorista</h4>
                        <small class="font-bold"><i class="fa fa-lightbulb-o"></i> Você pode combinar vários filtros</small>
                    </div>
                    <div class="modal-body">
                        <span>Filtros</span>
                        <!-- INSIDE MODAL BODY - DOESN'T WORK :( -->
                        <div ng-repeat="campo in camposFiltradosMotorista">
                            <div ng-repeat="tipo in tiposMotorista[campo]" class="checkbox checkbox-primary" class="styled">
                                <strong>
                                    <input id="motorista{{tipo}}" type="checkbox" ng-model="tiposMotoristaSelecionados[campo][tipo]" />
                                    <label for="motorista{{tipo}}">
                                        {{tipo}} - ({{ (motoristasFiltrados | filter:count(campo, tipo)).length }})
                                    </label>
                                </strong>
                            </div>
                            <hr ng-if="!$last" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

angularjs modal ng-repeat bootstrap

asked by anonymous 09.01.2017 / 21:12

1 answer

Navbar - Offsite Link Boostrap Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience

score 0 · Answer 1

You did not mention which modal engine you're using - assuming you've created your own, check your scope setting:

app.directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {}        // Cria uma versão isolada do escopo
  }
}

If you want to have access to properties defined in scopes of elements that encapsulate the policy, use true in the definition:

app.directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: true      // Herda escopo
  }
}