如何确认AngularJS中的特定用户?
How to confirm a specific user in AngularJS?
所以,我在 Angularjs 中新增了所有这些 GET、PUT、请求。但是,我正在创建一个应用程序,其中一页有用户列表,第二页有一个带有三个按钮的表单。其中,我专注于一个按钮,即 "Confirm" 按钮。
所以,我想用确认按钮做的是确认一个特定的用户,这个用户将被称为 PUT /users/{userId}/confirm。我需要这部分的帮助。我已经完成了从后端获取用户的 GET 部分。但是,无法通过 PUT 请求弄清楚。
Here is the code so far.
services
app.factory('people', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://admin/v1/unconfirmed_users');
},
};
return userInfo;
}]);
app.factory('people', function($http){
var services = {};
services.getUserInfo = function() {
return $http.put('https://users/{userId}/confirm');
};
return services;
})
App.js
var app = angular.module("Portal", ['ngRoute', 'ui.bootstrap' ]);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.confirmedAction = function(person) {
$scope.userInfo.users.splice(person.id, 1);
location.href = '#/user';
person.data = "true";
console.log(person.data);
console.log(person);
};
});
app.directive('confirmClick', ['$q', 'dialogModal', function($q, dialogModal)
{
return {
link: function (scope, element, attrs) {
// ngClick won't wait for our modal confirmation window to resolve,
// so we will grab the other values in the ngClick attribute, which
// will continue after the modal resolves.
// modify the confirmClick() action so we don't perform it again
// looks for either confirmClick() or confirmClick('are you sure?')
var ngClick = attrs.ngClick.replace('confirmClick()', 'true')
.replace('confirmClick(', 'confirmClick(true,');
// setup a confirmation action on the scope
scope.confirmClick = function(msg) {
// if the msg was set to true, then return it (this is a workaround to make our dialog work)
if (msg===true) {
return true;
}
// msg can be passed directly to confirmClick('Are you sure you want to confirm?')
// in ng-click
// or through the confirm-click attribute on the
// <a confirm-click="Are you sure you want to confirm?"></a>
msg = msg || attrs.confirmClick || 'Are you sure you want to confirm?';
// open a dialog modal, and then continue ngClick actions if it's confirmed
dialogModal(msg).result.then(function() {
scope.$eval(ngClick);
});
// return false to stop the current ng-click flow and wait for our modal answer
return false;
};
}
}
}])
/*
Modal confirmation dialog window with the UI Bootstrap Modal service.
This is a basic modal that can display a message with yes or no buttons.
It returns a promise that is resolved or rejected based on yes/no clicks.
The following settings can be passed:
message the message to pass to the modal body
title (optional) title for modal window
okButton text for YES button. set false to not include button
cancelButton text for NO button. ste false to not include button
*/
.service('dialogModal', ['$modal', function($modal) {
return function (message, title, okButton, cancelButton) {
// setup default values for buttons
// if a button value is set to false, then that button won't be included
cancelButton = cancelButton===false ? false : (cancelButton || 'No');
okButton = okButton ===false ? false : (okButton || 'Yes');
// setup the Controller to watch the click
var ModalInstanceCtrl = function ($scope, $modalInstance, settings) {
// add settings to scope
angular.extend($scope, settings);
// yes button clicked
$scope.ok = function () {
$modalInstance.close(true);
};
// no button clicked
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
// open modal and return the instance (which will resolve the promise on ok/cancel clicks)
var modalInstance = $modal.open({
template: '<div class="dialog-modal"> \
<div class="modal-header" ng-show="modalTitle"> \
<h3 class="modal-title">{{modalTitle}}</h3> \
</div> \
<div class="modal-body">{{modalBody}}</div> \
<div class="modal-footer"> \
<button class="btn btn-primary" ng-click="ok()" ng-show="okButton">{{okButton}}</button> \
<button class="btn btn-warning" ng-click="cancel()" ng-show="cancelButton">{{cancelButton}}</button> \
</div> \
</div>',
controller: ModalInstanceCtrl,
resolve: {
settings: function() {
return {
modalTitle: title,
modalBody: message,
okButton: okButton,
cancelButton: cancelButton
};
}
}
});
// return the modal instance
return modalInstance;
}
}])
//Our routes
app.config(function ($routeProvider) {
$routeProvider
.when("/user", {
controller: "HomeController",
templateUrl: "partials/home.html"
})
.when("/user/:id", {
controller: "UserController",
templateUrl: "partials/about.html"
})
.otherwise({
redirectTo: '/user'
});
});
app.factory('people', function ($http) {
var service = {};
service.getUserInfo = function () {
return $http.get('https://admin/v1/unconfirmed_users');
};
service.confirmUser = function (userId) {
return $http.put('https://users/' + userId + '/confirm', {});
};
return service;
});
所以,我在 Angularjs 中新增了所有这些 GET、PUT、请求。但是,我正在创建一个应用程序,其中一页有用户列表,第二页有一个带有三个按钮的表单。其中,我专注于一个按钮,即 "Confirm" 按钮。 所以,我想用确认按钮做的是确认一个特定的用户,这个用户将被称为 PUT /users/{userId}/confirm。我需要这部分的帮助。我已经完成了从后端获取用户的 GET 部分。但是,无法通过 PUT 请求弄清楚。
Here is the code so far. services
app.factory('people', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://admin/v1/unconfirmed_users');
},
};
return userInfo;
}]);
app.factory('people', function($http){
var services = {};
services.getUserInfo = function() {
return $http.put('https://users/{userId}/confirm');
};
return services;
})
App.js
var app = angular.module("Portal", ['ngRoute', 'ui.bootstrap' ]);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.confirmedAction = function(person) {
$scope.userInfo.users.splice(person.id, 1);
location.href = '#/user';
person.data = "true";
console.log(person.data);
console.log(person);
};
});
app.directive('confirmClick', ['$q', 'dialogModal', function($q, dialogModal)
{
return {
link: function (scope, element, attrs) {
// ngClick won't wait for our modal confirmation window to resolve,
// so we will grab the other values in the ngClick attribute, which
// will continue after the modal resolves.
// modify the confirmClick() action so we don't perform it again
// looks for either confirmClick() or confirmClick('are you sure?')
var ngClick = attrs.ngClick.replace('confirmClick()', 'true')
.replace('confirmClick(', 'confirmClick(true,');
// setup a confirmation action on the scope
scope.confirmClick = function(msg) {
// if the msg was set to true, then return it (this is a workaround to make our dialog work)
if (msg===true) {
return true;
}
// msg can be passed directly to confirmClick('Are you sure you want to confirm?')
// in ng-click
// or through the confirm-click attribute on the
// <a confirm-click="Are you sure you want to confirm?"></a>
msg = msg || attrs.confirmClick || 'Are you sure you want to confirm?';
// open a dialog modal, and then continue ngClick actions if it's confirmed
dialogModal(msg).result.then(function() {
scope.$eval(ngClick);
});
// return false to stop the current ng-click flow and wait for our modal answer
return false;
};
}
}
}])
/*
Modal confirmation dialog window with the UI Bootstrap Modal service.
This is a basic modal that can display a message with yes or no buttons.
It returns a promise that is resolved or rejected based on yes/no clicks.
The following settings can be passed:
message the message to pass to the modal body
title (optional) title for modal window
okButton text for YES button. set false to not include button
cancelButton text for NO button. ste false to not include button
*/
.service('dialogModal', ['$modal', function($modal) {
return function (message, title, okButton, cancelButton) {
// setup default values for buttons
// if a button value is set to false, then that button won't be included
cancelButton = cancelButton===false ? false : (cancelButton || 'No');
okButton = okButton ===false ? false : (okButton || 'Yes');
// setup the Controller to watch the click
var ModalInstanceCtrl = function ($scope, $modalInstance, settings) {
// add settings to scope
angular.extend($scope, settings);
// yes button clicked
$scope.ok = function () {
$modalInstance.close(true);
};
// no button clicked
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
// open modal and return the instance (which will resolve the promise on ok/cancel clicks)
var modalInstance = $modal.open({
template: '<div class="dialog-modal"> \
<div class="modal-header" ng-show="modalTitle"> \
<h3 class="modal-title">{{modalTitle}}</h3> \
</div> \
<div class="modal-body">{{modalBody}}</div> \
<div class="modal-footer"> \
<button class="btn btn-primary" ng-click="ok()" ng-show="okButton">{{okButton}}</button> \
<button class="btn btn-warning" ng-click="cancel()" ng-show="cancelButton">{{cancelButton}}</button> \
</div> \
</div>',
controller: ModalInstanceCtrl,
resolve: {
settings: function() {
return {
modalTitle: title,
modalBody: message,
okButton: okButton,
cancelButton: cancelButton
};
}
}
});
// return the modal instance
return modalInstance;
}
}])
//Our routes
app.config(function ($routeProvider) {
$routeProvider
.when("/user", {
controller: "HomeController",
templateUrl: "partials/home.html"
})
.when("/user/:id", {
controller: "UserController",
templateUrl: "partials/about.html"
})
.otherwise({
redirectTo: '/user'
});
});
app.factory('people', function ($http) {
var service = {};
service.getUserInfo = function () {
return $http.get('https://admin/v1/unconfirmed_users');
};
service.confirmUser = function (userId) {
return $http.put('https://users/' + userId + '/confirm', {});
};
return service;
});