0

我正在开发一个带有 CURD 操作的 angulatJS 应用程序。

在我的应用程序中，我将创建、编辑和删除记录！我可以做到这一点，但我无法在模型中绑定数据，因为我需要重新启动浏览器才能看到更新。

这是我的代码...任何输入将不胜感激。

这是我的主要js

angular.module('serviceClient', ['serviceClient.services','serviceClient.controllers','ngRoute']).
    config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/home', {templateUrl: 'pages/home.html'});
        $routeProvider.when('/testcases-list', {templateUrl: 'pages/testlist.html', controller: 'serviceCtrl'});
        $routeProvider.when('/test-edit/:id', {templateUrl: 'pages/test-details.html', controller: 'TCDetailCtrl'});
        $routeProvider.when('/testcases-creation', {templateUrl: 'pages/testcases-creation.html', controller: 'TCCreationCtrl'});
        $routeProvider.otherwise({redirectTo: '/home'});
        
      }]);

'use strict';

var app = angular.module('serviceClient.controllers', []);



app.run(function ($rootScope, $templateCache) {
    $rootScope.$on('$viewContentLoaded', function () {
        $templateCache.removeAll();
    });
});


//list
app.controller('serviceCtrl', [ 'DemoService','DemoService2', '$scope', '$location',
		function(DemoService,DemoService2, $scope, $location) {
	
			$scope.editTestCase= function(userId) {
				$location.path('/test-edit/'+userId);
			};

			$scope.deleteTestCase = function(userId) {
				DemoService2.remove({ id: userId });
				
			};

			$scope.createNewTestCase = function() {
				$location.path('/testcases-creation');
			};

			DemoService.query(function(DemoService) {
				$scope.response = DemoService;
			});

		} ]);

//create
app.controller('TCCreationCtrl', [ '$scope', 'DemoService', '$location',
		function($scope, DemoService, $location) {
				$scope.createNewTestCase = function() {
				DemoService.create($scope.testCase);
				$location.path('/testcases-list');
				
				}
		} ]);

//update
app.controller('TCDetailCtrl', [ '$scope', '$routeParams', 'DemoService2',
		'$location', function($scope, $routeParams, DemoService2, $location) {
			//alert("update");
			$scope.updateTestCase = function() {
				DemoService2.update($scope.testCase);
				$location.path('/testcases-list');
			};
			
			$scope.cancel = function() {
			$location.path('/testcases-list');
			};

			$scope.testCase = DemoService2.show({
			id : $routeParams.id
			});
			
		} ]);

'use strict';

var app = angular.module('serviceClient.services', [ 'ngResource' ]);


app.factory('DemoService', function($resource) {
	return $resource('http://localhost:8080/', {}, {
		query : {method : 'GET',params : {},isArray : true},
		create: {method: 'POST'}
	});
});


app.factory('DemoService2', function($resource) {
	return $resource('http://localhost:8080/:id', {}, {
		show: { method: 'GET' },
		update: { method: 'PUT', params: {id:'@id'} },
		remove:{method: 'DELETE',params: {id:'@id'} }
	});
});

在这里，如果进行任何插入/更新/删除操作，我想立即在前端和后端看到。

我尝试重新加载，$promise ......但我阻止了一些地方！

谢谢

4

1 回答 1

0

对于您对我的评论的回答，我会说“i”只是当前连接的用户，而不是另一个连接的用户。

你有两种方法：

  1. 重新加载页面。很简单，但会触发很多对服务器不必要的请求。
  2. 一旦服务器成功添加到数据库中，将项目添加到列表中，您必须使用资源的 $promise 字段：
DemoService.create($scope.testCase).$promise.then(function(){
    $scope.myDatas.push($scope.testCase);
});

您说您尝试了 $promise，如果这对您不起作用，请在浏览器中打开您的调试控制台，并向我们展示当您尝试创建元素时发送到服务器的请求是什么以及服务器的答案是什么。

于 2016-02-29T07:59:32.253 回答