1

我想做的很简单。我有两种形式。一个表单在开始时是可见的，一旦提交了该表单，它就会消失并出现第二个表单。我正在尝试使用在$rootscope.showFlag设置的标志变量，但它似乎不起作用。

这是我的 HTML 部分：

<div ng-app="myapp" >
    <div class="container"  ng-controller="addItemController" ng-show="showFlag">

        <form class="form-signin">
            <h2 class="form-signin-heading">Add an item</h2>

            <input type="text" name="itemName" ng-model="myForm.itemName" id="inputItemName" class="form-control" placeholder="Name of the item" autofocus required>

            <button class="btn btn-lg btn-primary btn-block" ng-click="myForm.submitTheForm()">Add item</button>
        </form>

    </div> <!-- /container -->

      <div class="container"  ng-controller="MyCtrl" ng-show="!showFlag">
          <input type="text" ng-model="username"></br></br>
          <button class="btn btn-lg btn-primary btn-block" ngf-select ng-model="files">Select file</button>
      </div>
  </div>

这是我的 Angular 应用程序： 

var app = angular.module("myapp", ['ngFileUpload'])
    .run(function($rootScope) {
        $rootScope.showFlag = true;
    });



 app.controller("addItemController", function($rootScope, $scope, $http) {
        $scope.myForm = {};
        $scope.showFlag = true;
        Data.Show = 10;

        $scope.myForm.submitTheForm = function(item, event)
        {
            console.log("--> Submitting form");
            var dataObject = {
                itemName : $scope.myForm.itemName,
            };

            var responsePromise = $http.post("/angularjs-post", dataObject, {});
            responsePromise.success(function(dataFromServer, status, headers, config) {
                console.log(dataFromServer.title);
                //alert("Submitting form OK!");
                $rootScope.showFlag = false;
            });
            responsePromise.error(function(data, status, headers, config) {
                alert("Submitting form failed!");
            });
        }


        $scope.myForm.uploadPhoto = function(item, event)
        {
            console.log('Uploading photo');
        }
    });

app.controller('MyCtrl', ['$scope', 'Upload', function ($rootScope, $scope, Upload) {
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
    });
    $scope.log = '';

    $scope.upload = function (files) {
        if (files && files.length) {
            var file = files[0];
            Upload.upload({
                url: '/upload',
                fields: {
                    'username': $scope.username
                },
                file: file
            }).progress(function (evt) {
                // during progress
            }).success(function (data, status, headers, config) {
                // after finishing
            });
        }
    };
}]);

4

2 回答 2

1

一个可能的原因可能是您拼错了控制器名称，它应该是 addSellItemController。

<div class="container"  ng-controller="addSellItemController" ng-show="showFlag">

另一个小错误是您没有在 MyCtrl 指令中添加 $rootScope 作为依赖项。

app.controller('MyCtrl', ['$rootScope','$scope', 'Upload', function ($rootScope, $scope, Upload) {
...
    });
于 2015-05-21T14:42:03.567 回答
1

您在两个地方将 showFlag 设置为 true。

在根范围内。

.run(function($rootScope) {
    $rootScope.showFlag = true;
});

并且在本地范围内。

app.controller("addItemController", function($rootScope, $scope, $http) {
    $scope.myForm = {};
    $scope.showFlag = true;

由于第一个表单的 ng-show 首先在本地范围内查找，因此即使您将 rootScope 标志设置为 false，它也不会受到影响。

于 2015-05-21T15:39:53.300 回答