1

私がやりたいことはとてもシンプルです。私には2つのフォームがあります。最初に 1 つのフォームが表示され、そのフォームが送信されると消えて、2 番目のフォームが表示されます。$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

2 つの場所で 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 に答える