Question

我正在开发一个带有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 ...但我阻止了一些地方！

由于

Answer 1

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

你有两种方法可以做到这一点：

重新加载页面。容易但会触发很多不必要的服务器请求。
在服务器成功添加到数据库中之后，将项目添加到列表中，您必须使用资源的$ promise字段：

DemoService.create($scope.testCase).$promise.then(function(){
    $scope.myDatas.push($scope.testCase);
});

你说你试过$ promise，如果这不适合你，请在你的浏览器中打开调试控制台，告诉我们当你尝试创建一个元素时发送给服务器的请求是什么，什么是服务器的答案。

angularjs与spring，mybatis和restful服务的双向数据绑定

1 个答案: