Question

我想要做的很简单。我有两种形式。一个表单在开头可见，一旦提交该表单，它就会消失，第二个表单出现。我正在尝试使用 $ 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
            });
        }
    };
}]);

Answer 1

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

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

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

app.controller('MyCtrl', ['$rootScope','$scope', 'Upload', function ($rootScope, $scope, Upload) {
...
    });

Answer 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也不会受到影响。

使用$ rootscope更改控制器之间的ng-show

2 个答案: