Question

我本来不会说英语，所以请耐心地说我和我的英语。我正在尝试做一个crud应用程序。但是当我按下保存时，它不会在表格中显示。可能是什么问题呢？谢谢你的帮助！

services.js：

var professionalSkillServices = angular.module('professionalSkillServices', ['ngResource']);

 professionalSkillServices.factory('ProfessionalSkill', ['$resource',
function ($resource) {
    return $resource('http://jbossews-themaopdracht78.rhcloud.com/rest/professionalskills/:id', {id: '@id'}, {
        update: {
            method: "PUT"
        },
        delete: {
            method: "DELETE",
            params:{}
        }
    });
}]);

app.js

   var professionalSkillApp = angular.module('professionalSkillApp', [
     'ngRoute',
  'professionalSkillControllers',
  'professionalSkillServices'
 ]);

     professionalSkillApp.config(['$routeProvider',
  function($routeProvider) {
$routeProvider
    .when('/professionalskills', {templateUrl: 'partials/professionalSkills-list.html', controller: 'ProfessionalSkillListCtrl'})
    .otherwise({redirectTo: '/professionalskills'});
}]);

controller.js

 var professionalSkillControllers = angular.module('professionalSkillControllers', []);

   professionalSkillControllers.controller('ProfessionalSkillListCtrl', ['$scope', 'ProfessionalSkill',
function ($scope, ProfessionalSkill) {
    var professionalskill = ProfessionalSkill.get({id: $scope.id}, function () {
        console.log(professionalskill);
    });
    $scope.professionalskills = ProfessionalSkill.query();

    $scope.professionalskill = new ProfessionalSkill();

    $scope.addProfessionalSkill = function () {
        ProfessionalSkill.save($scope.professionalskill, function () {
            $scope.professionalskills.push($scope.professionalskill);
        });
        $scope.professionalskill = "";
    };
    $scope.deleteBT = function (idx) {
        var professionalSkill_to_delete = $scope.professionalskills[idx];
        if (ProfessionalSkill) {
            ProfessionalSkill.remove({id: professionalSkill_to_delete.id}, function (success) {
                $scope.professionalskills.splice(idx, 1);
            });
        }
    };
}
]);

professionalSkill-list.html

  <div class="panel-body" id="psForm psFormTable">
<div class="panel panel-default">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
                <th>Naam</th>
                <th>Samenvatting</th>
                <th>Niveau</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="professionalskill in professionalskills">
                <td>{{professionalskill.id}}</td>
                <td>{{professionalskill.naam}}</td>
                <td>{{professionalskill.samenvatting}}</td>
                <td>{{professionalskill.niveau}}</td>
                <td class="table-buttons">
                    <button ng-click="deleteBT($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash"></span></button>
                    <button class="btn btn-sm btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span></button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

professionalskill.html（只是div）

   </ol>
<div class="page-header">
    <h1>ProfessionalSkill Aanmaken</h1>
</div>
<div class="row" ng-controller="ProfessionalSkillListCtrl">
    <form class="form-horizontal" name="professionalskillForm" role="form">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="col-md-2">
                            <label for="naam" class="control-label">Naam</label>
                        </div>
                        <div class="col-md-9">
                            <input id="naam" class="form-control" type="text" ng-model="professionalskill.naam">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            <label for="samenvatting" class="control-label">Samenvatting</label>
                        </div>
                        <div class="col-md-9">
                            <input id="samenvatting" class="form-control" type="text" ng-model="professionalskill.samenvatting">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            <label for="niveau" class="control-label">Niveau</label>
                        </div>
                        <div class="col-md-9">
                            <select id="niveau" class="form-control" name="niveau" ng-model="professionalskill.niveau">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                            <!-- <input type="text" id="niveau" class="form-control" ng-model="beroepstaak.niveau"/> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn btn-danger pull-left">Annuleren</button>
        <button ng-click="addProfessionalSkill(professionalskill)" class="btn btn-success pull-right">Opslaan</button>
    </form>
</div>
<div class="row">
    <div ng-view></div>
</div>

Answer 1

在我看来，你正在推动一系列不同的技能。根据它的外观，您实例化了相同的控制器两次，并且由于AngularJS中的控制器不是singletons，因此很可能是您正在推送到不同的阵列。

以您的形式：

<div class="row" ng-controller="ProfessionalSkillListCtrl">

在您的路由中：

  .when('/professionalskills', {templateUrl: 'partials/professionalSkills-list.html', controller: 'ProfessionalSkillListCtrl'})

我必须刷新AngularJS页面，看看我是否添加了一些内容

1 个答案: