在UI-Router Partial中使用Angular XEditable

Question

无法让我的表单在UI-Router中工作，它可以在部分内部工作，但不能在内部工作。 XEditable不是＆＃34; loading＆＃34;它的范围超出范围。 我试图使用ocLazyLoadProvider延迟加载它，但无法使其工作。

请帮忙！

我的代码：

主要观点：

doctype html
html(lang="en")
    include ../includes/head
    body.backoffice
        div.container
            include ../includes/navbar
            .page-body(ng-app='geckoAdminApp')
                include includes/nav
                    div(ui-view='maincontent')
                    //include includes/management
        div.padding
    include ../includes/foot

部分视图：

//-
//- Buildings Form
//-
div(ng-controller='BuildingsController')
    h2 Edificios
    table.table.table-bordered.table-hover.table-condensed.table-striped
        thead.thead-default
            tr
                th
                    strong Nome
                th
                    strong Descrição
                th
                    strong Total de Espaços
                th
                    strong Total de Boxes
                th
        tr(ng-repeat='building in buildingsData')
            td
                a( ng-click='setCurrentBuildingID(building.idBuilding, building.shortName)' ng-show='toggleShortname' href='') {{ building.shortName }}
                span( ng-hide='toggleShortname' editable-text='building.shortName' e-name='shortName' e-form='buildingrowform') {{ building.shortName }}
            td
                span(editable-text='building.description' e-name='description' e-form='buildingrowform') {{ building.description }}
            td
                span(editable-number='building.nSpaces' e-name='nSpaces' e-form='buildingrowform') {{ building.nSpaces }}
            td
                span(editable-number='building.nBoxes' e-name='nBoxes' e-form='buildingrowform') {{ building.nBoxes }}
            td(style='white-space: nowrap')
                // form
                form(editable-form myForm name='buildingrowform' onbeforesave='saveBuildingData($data, building.idBuilding)' ng-show='buildingrowform.$visible' class='form-buttons form-inline' shown='inserted == building')
                    button.glyphicon.glyphicon-save.glyphButton.btn-to-glyph.glyphButtonOk(type='submit' title='Salvar' ng-disabled='buildingrowform.$waiting')
                    a(href='' ng-disabled='buildingrowform.$waiting' ng-click='buildingrowform.$cancel()' title='Cancelar')
                        span.glyphicon.glyphicon-remove-circle.glyphButton.glyphButtonAlert(aria-hidden='true')
                div.buttons(ng-show='!buildingrowform.$visible')
                    a(href='' ng-click='buildingrowform.$show(); toggleShortnameFunction()' title="Editar")
                        span.glyphicon.glyphicon-edit.glyphButton(aria-hidden='true')
                    a(href='' ng-click='removeBuilding(building.idBuilding, $index)' title="Remover")
                        span.glyphicon.glyphicon-remove.glyphButton.glyphButtonAlert(aria-hidden='true')
    a(href='' ng-click='addBuildingRow()' title="Adicionar")
        span.glyphicon.glyphicon-plus.glyphButton.glyphButtonOk(aria-hidden='true')

角：

angular.module('geckoAdminApp', ['xeditable', 'ui.router'])


        .config(function($stateProvider, $urlRouterProvider){

            $stateProvider

            .state('edificios', {
                url: '/edificios',
                views: {
                    'maincontent': { templateUrl: '/partials/admin/partial-buildings.html' }
                },
                controller: 'BuildingsController'//,
            });

        })

        .controller('BuildingsController', ['$scope', '$filter', '$http', '$window', function ($scope, $filter, $http, $window) {
            // $ocLazyLoad.load('xeditable');
            $scope.buildingsData = [];
            $scope.regex = /[A-Z]{1}\d{2}$/;


            $scope.currentBuildingID = '';
            $scope.setCurrentBuildingID = function (id, shortName) {
                console.log('>> ID: ' + id);
                $scope.currentBuildingID = id;
                $window.location.href = '/admin/edificio/' + shortName;
            };
            $scope.toggleShortnameFunction = function () {
                $scope.toggleShortname = !$scope.toggleShortname;
            };

            $scope.GetBuildings = function () {
                $http.get(GeckoBuildingUrl).then(function (res) {// jshint ignore:line
                    $scope.buildingsData = res.data.item; //TODO: Verificar status code
                    console.log(res.data);
                }, function (res) {
                    console.log('ERROR: Can\'t get buildings: ' + res.data);
                    $scope.buildingsData = [];
                });
            };
            $scope.GetBuildings();
            $scope.saveBuildingData = function (building, buildingId) {
                if (buildingId) {
                    $scope.toggleShortnameFunction();
                    console.log('Update Building: ' + building.shortName + ' ' + building.description + ' ' + building.nSpaces + ' ' + building.nBoxes + ' ');
                    $http({
                        url: GeckoBuildingUrl + '/' + buildingId,// jshint ignore:line
                        //url: building.URI,
                        method: 'PUT',
                        contentType: 'application/x-www-form-urlencoded',
                        data: {
                            shortName: building.shortName,
                            description: building.description,
                            nSpaces: String(building.nSpaces),
                            nBoxes: String(building.nBoxes)
                        }
                    }).then(function successCallback() {
                        $scope.GetBuildings();
                    }, function errorCallback(response) {
                        console.log(response);
                    });
                } else {
                    console.log('New Building: ' + building.shortName + ' ' + building.description + ' ' + building.nSpaces + ' ' + building.nBoxes + ' ');
                    $http({
                        url: GeckoBuildingUrl,// jshint ignore:line
                        method: 'POST',
                        contentType: 'application/x-www-form-urlencoded',
                        data: {
                            shortName: building.shortName,
                            description: building.description,
                            nSpaces: String(building.nSpaces),
                            nBoxes: String(building.nBoxes)
                        }
                    }).then(function successCallback(response) {
                        $scope.GetBuildings();
                        console.log('success post:' + response);
                    }, function errorCallback(response) {
                        console.log(response);
                    });
                }

            };
            $scope.removeBuilding = function (buildingId, index) {
                if (buildingId) {
                    console.log(GeckoBuildingUrl + '/' + buildingId);// jshint ignore:line
                    $http({
                        url: GeckoBuildingUrl + '/' + buildingId,// jshint ignore:line
                        method: 'DELETE',
                        contentType: 'form-data',
                        data: {}
                    }).then(function successCallback(response) {
                        $scope.GetBuildings();
                        console.log('success DELETE:' + response);
                    }, function errorCallback(response) {
                        console.log('error DELETE:' + response);
                    });
                }
                $scope.buildingsData.splice(index);
            };
            $scope.addBuildingRow = function () {
                $scope.inserted = {
                    shortName: '',
                    description: '',
                    nSpaces: 0,
                    nBoxes: 0
                };
                $scope.buildingsData.push($scope.inserted);
            };
        }]);

谢谢！