Question

我正在研究一个有棱角分明的测试项目，但很热情它停止了工作！

我没有更改项目中的任何内容，但知道我是否输入了一个列表，例如，在我看到“description”之前，我现在看到标签{{obj.descrip}}！

我的所有领域都在发生。

我的浏览器控制台日志没有显示任何内容。

我的所有导入都是正确的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

我的页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="true"%>
<!doctype html>
<html data-ng-pp="caixaApp">
<head>
<title>Barattie ~ Soluções Integradas</title>
<link rel="icon"
    href="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2015/May/27/3957014059-5-barattieproject-avatar.png">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name='robots' content='noindex,nofollow'/>

<script src="<c:url value='/resources/js/jquery-latest.min.js' />"></script>
<script src="<c:url value='/resources/js/angular.js' />"></script>
<script src="<c:url value='/resources/js/bootstrap.min.js' />"></script>
<script src="<c:url value='/resources/js/ui-bootstrap.min.js' />"></script>
<script src="<c:url value='/resources/js/CaixaController.js' />"></script>

</head>
<body data-ng-controller="caixaCtrl">   
    <%@ include file="/resources/html/menu_inc.jsp"%>

    <alert data-ng-repeat="alert in alerts" type="alert.type" close="fecharAlert($index)">{{alert.msg}}</alert>
    <section>
        <button data-ng-click="abrir()" class="btn btn-sm btn-primary pull-right">Novo Registro</button>
    </section>
    <br/>
    <table data-ng-table="tabela" class="table table-hover">
        <thead>
            <tr>
                <th>Descrição</th>
                <th>Saldo</th>
                <th>Opções</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="caixa in caixas | orderBy: ['ativo','descricao']">
                <td>
                    <span>{{caixa.descricao}}</span>
                </td>
                <td>
                    <span>{{caixa.saldo | currency}}</span>
                </td>
                <td>
                    <button data-ng-disabled="!caixa.ativo" data-ng-click="abrir(caixa.id)" class="btn btn-primary btn-xs">Alterar</button>
                    <button data-ng-click="manter(caixa.id, !caixa.ativo)" class="btn btn-default btn-xs">{{caixa.ativo ? 'Desativar' : 'Ativar'}}</button>
                </td>
            </tr>
        </tbody>
    </table>

    <script type="text/ng-template" id="add_modal">
    <div class="modal-header">
        <h3>Caixas</h3>
    </div>

    <div class="modal-body">
        <!--<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>-->
        <form name="addForm" class="form-horizontal">
            <input id="id" type="hidden" data-ng-model="caixa.id" />
            <div class="control-group">
                <label class="control-label" for="name">Descrição</label>
                <div class="controls">
                    <input id="descricao" name="descricao" data-ng-model="caixa.descricao" type="text" placeholder="Ex. Caixa 01" class="input-xlarge" required=""  ng-class="{error: caixa.descricao.$invalid && !caixa.descricao.$pristine}" required/>
                </div>
            </div>

            <div class="control-group" ng-class="{error: caixa.saldo.$invalid && !caixa.saldo.$pristine}">
               <label class="control-label" for="saldo">Saldo</label>
                <div class="controls">
                    <input id="saldo" name="saldo" data-ng-model="caixa.saldo" type="text" placeholder="0.00" class="input-xlarge" required />
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button ng-click="salvar()" ng-disabled="caixa.$invalid" class="btn btn-success"><i class="icon-white icon-plus"></i> Salvar</button>
        <button ng-click="cancelar()" class="btn">Cancelar</button>
    </div>
</script>

</body>
</html>

控制器

var app = angular.module('caixaApp', ['ui.bootstrap']);

app.controller('caixaCtrl',[ '$scope', '$http', '$modal', function($scope, $http, $modal) {

    $http.defaults.headers.post['Content-Type'] = 'application/json';
    $scope.alerts = [];

    var urlBase='/sistem/';

    function lista() {
        $http.get(urlBase + 'caixas/consultar').success(function(data) {
            $scope.caixas = data;
        });
    }

    //Carrega a lista geral assim que o documento é iniciado
    lista();

    //Fecha a mensagem de alerta
    $scope.fecharAlert = function(index) {
        $scope.alerts.splice(index, 1);
    };

    // Abre a modal
    $scope.abrir = function(caixaId) {
        var modalInstance = $modal.open({
            templateUrl: 'add_modal',
            controller: modalCtrl,
            resolve: {
                id: function() {
                    return caixaId;
                }
            }
        });

        modalInstance.result.then(function () {
            //Atualiza a lista apenas no metodo .close() do modal.
            lista();
            $scope.alerts.splice(0, 1);
            $scope.alerts.push({
                type: 'success',
                msg: "Registro salvo"
            });
        });
    };

    //controller da modal
    function modalCtrl($scope, $modalInstance, id) {
        $scope.alerts = [];
        $scope.caixa = {};

         //Carrega o objeto no modal se for alteracao
         if (angular.isDefined(id))
             $http.post(urlBase + 'caixas/alterar/'+id).success(function(data) {
                $scope.caixa = data;
             });

         //fecha o modal
         $scope.cancelar = function() {
           $modalInstance.dismiss('cancel');
         };

        // mantem o usuario
        $scope.salvar = function() {
            $http.post(urlBase + 'caixas/adicionar', $scope.caixa).success(function(data) {
              $modalInstance.close();
            });
        };
    }

    //Ativa / Desativa o material
     $scope.manter = function manter(id, manter) {
         $http.post(urlBase + 'caixas/manter/'+id+'&'+manter).success(function(data) {
             $scope.caixas = data;
             $scope.alerts.splice(0, 1);
             $scope.alerts.push({
                type: 'success',
                msg: "Manutenção realizada"
            });
         });
     };
}]);

Answer 1

您的脚本应位于页面底部。

请将CaixaController.js放在页面底部，就在正文结束标记之前。希望能解决这个问题。

<强>更新：

请更正data-ng-pp="caixaApp"至data-ng-app="caixaApp"。＆＃39;一个＆＃39;不见了。希望这能解决问题：）

AngularJS停止工作

1 个答案: