Question

我正在创建一个网络应用程序，我在一个页面上有一个用户列表，在第二个页面上我有一个用户的表单，有三个按钮。但是，我有一个确认按钮，当单击确认按钮时，我希望用户从列表中删除。我已实现它，但由于某种原因确认按钮不起作用。

这是我的代码。

    <div ng-controller="MyCtrl">
<div ng-repeat="person in userInfo.users | filter : {id: userId}">

<a class="back" href="#/user">Back</a>

  <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
    Edit
  </button>

  <button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>

  <a class="delete" ng-click="confirmClick() && confirmedAction()" confirm-click>Confirm</a>


  <div class="people-view">

    <h2 class="name">{{person.firstName}}</h2>

    <h2 class="name">{{person.lastName}}</h2>

    <span class="title">{{person.email}}</span>

    <span class="date">{{person.website}} </span>


</div>

  <div class="list-view">

    <form>

      <fieldset ng-disabled="inactive">

        <legend>Basic Info</legend>

        <b>First Name:</b>

        <input type="text" ng-model="person.firstName">
        <br>

        <b>Last Name:</b>

        <input type="text" ng-model="person.lastName">
        <br>

        <b>Email:</b>

        <input type="email" ng-model="person.email">


        <br>

      </fieldset>

    </form>

  </div>
</div>
</div>

App.js

    var app = angular.module("UserPortal", ['ngRoute',  'ui.bootstrap' ]);


   app.controller('MyCtrl', function($scope) {


    $scope.inactive = true;

    $scope.confirmedAction = function() {

    isConfirmed.splice($scope.person.id, 1);

    location.href = '#/user';






    }

    });


       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;
    }
}])


    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'

     });

}）;

的HomeController

    var isConfirmed = false;
app.controller('HomeController', function($scope, people, $http) {
    if (!isConfirmed) {
        people.getUserInfo().then(function (response) {

            $scope.userInfo = response.data;



             isConfirmed = $scope.userInfo;

            console.log($scope.person);

        }, function (error) {
            console.log(error)
        });
    }
});

Answer 1

如果你想在ng-click中触发多个函数，你可以选择它们;不是＆amp;＆amp;

更改此

ng-click="confirmClick() && confirmedAction()"

到

ng-click="confirmClick(); confirmedAction()"

<强>更新

如果MyCtrl在HomeController的范围内，那么该控制器继承自HomeController。话虽如此，$scope.userInfo将在MyCtrls范围内可用。

要从用户阵列中删除某人，您需要做两件事

首先，将当前用户传递给方法

$scope.confirmedAction = function(person) {

    $scope.userInfo.users.splice(person.id, 1);
    location.href = '#/user';
};

然后在ng-click事件中添加人员

ng-click="confirmClick(); confirmedAction(person);"

确认按钮不会从列表中删除用户？ AngularJS

1 个答案: