Question

我遇到了在控制器中运行函数两次的angular指令的问题，我想知道如果有一个解决方法，或者我做错了什么。

JS

           app.directive("usertype", function() {
                return {
                    restrict: 'A',
                    replace: true,
                    template : `<div style='position: absolute;'  class='control-group'>
                                    <div class="close-i"><i class="material-icons" ng-click="reset()">close</i></div>
                                    <div class="preloader" ng-show = "loading && !done"></div>
                                    <div class="done" ng-show = "done"><i class="material-icons">done</i><p>Update Successful</p></div>
                                    <label class="control control--radio" style="margin-top: 30px" ng-click="updateusertype(user, '1')" ng-show = "!loading"><span>Super User</span>
                                        <input type="radio" name="usertype" checked="checked"/>
                                        <div class="control__indicator"></div>
                                    </label>
                                    <label class="control control--radio" ng-click="updateusertype(user, '2')" ng-show = "!loading"><span>Administrator</span>
                                        <input type="radio" name="usertype"/>
                                        <div class="control__indicator"></div>
                                    </label>
                                    <label class="control control--radio" ng-click="updateusertype(user, '3')" ng-show = "!loading"><span>Product Specialist</span>
                                        <input type="radio" name="usertype"/>
                                        <div class="control__indicator"></div>
                                    </label>
                                </div>
                    `,
                    controller: function($scope, $http){
                        $scope.reset = function(){
                            $scope.loading = false;
                            $scope.done = false;
                            $scope.showuserTypeForm = false;
                        }

                        $scope.updateusertype = function(user, newPost){
                                $scope.loading = true;
                                var pastPost = user.userType;
                                console.log(pastPost);
                                user.userType = newPost;
                                console.log(pastPost);
                                $http({
                                    url: "../../get1.php", 
                                    method: "GET",
                                    params: user
                                }).then(function(res){
                                        $scope.done = true;
                                        console.log(res.data);
                                }, function(err){
                                        console.log(pastPost);
                                        user.userType = pastPost;
                                });
                            }
                        }
                };
            });

HTML

<td  class="text-primary"><span ng-click="showuserTypeForm = !showuserTypeForm">{{user.userType | userType}}</span><div ng-show="showuserTypeForm" usertype></div></td>

这导致范围中的updateusertype方法发生冲突，特别是变量pastPost，我需要它在更新之前等于user.userType，所以如果$ http op失败，我可以恢复user.userType的值出于某些原因。但是如果函数运行两次，则pastPost现在等于更新的user.userType，这不是我所期望的。

Answer 1

通过不完美的解决方案来破解我的方式，但现在这样做。

                    $scope.updateusertype = function(user, newPost){
                            $scope.runOnce = !$scope.runOnce;
                            if($scope.runOnce){
                                $scope.loading = true;
                                var pastPost = user.userType;
                                console.log(pastPost);
                                user.userType = newPost;
                                console.log(pastPost);
                                $http({
                                    url: "../../get1.php", 
                                    method: "GET",
                                    params: user
                                }).then(function(res){
                                        $scope.done = true;
                                        console.log(res.data);
                                }, function(err){
                                        console.log(pastPost);
                                        user.userType = pastPost;
                                });
                            }
                        }

如何防止指令控制器运行两次

1 个答案: