I Have to refresh the AngularJS page to see if i added something

Question

I do not natively speak English, so please bear with me and my English. I am trying to make a crud application. But when i press save it does not show it in the table. What could be the problem? Thank you for your help!

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(just the 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>

try `$scope.$apply()` after `$scope.professionalskills.push($scope.professionalskill);` — Tomek Sułkowski, Jun 25 '15 at 12:46
what does $scope.professionalskills look like after the push in the save callback? — Eylen, Jun 25 '15 at 12:58

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

It seems to me that you are pushing to a different list of skills. By the looks of it you instantiated the same controller twice and since controllers in AngularJS are not singletons it is most likely the case that you're pushing to a different array.

In your form:

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

And in your routing:

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

edited May 23 '17 at 12:30

Community

1
1

answered Jun 25 '15 at 13:11

skubski

1,586
2
19
25

What would you suggest i do? remove it in my form? – user3599415 Jun 25 '15 at 13:45
This question was deleted when I replied to your comment... it kind of depends of what your requirements are. You can split up your screens and use a service to communicate between your controllers. You can use the form in the same partial with the same instance of the controller. You can broadcast adding events... – skubski Jun 29 '15 at 14:00

I Have to refresh the AngularJS page to see if i added something

1 Answers1