Using $rootscope to change ng-show between controllers

Question

What I want to do is pretty simple. I have two forms. One form is visible in the beginning and once that form is submitted it dissappears and the second form appears. I am trying to use a flag variable set at $rootscope.showFlag but it doesn't seem to work.

Here is my HTML part:

<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>

And this is my Angular app:

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

Why don't you simply use the same controller and when the first form is submitted you make appear the second form and hide the first one? — carton, May 21 '15 at 14:22
Create an plunker which can help to debug the issue. You may be missing the .(DOT) in the scope to inherit from one scope to another which will help you pass the reference. Use $rootScope.model.showFlag = true; — anandaravindan, May 21 '15 at 14:27

score 1 · Answer 1 · answered May 21 '15 at 14:42

One possible reason could be that you have misspelled the controller name it should be addSellItemController.

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

Another small mistake is you have not added $rootScope as a dependency in your MyCtrl directive.

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

score 1 · Accepted Answer · answered May 21 '15 at 15:39

1

You set showFlag to true in two places.

In the root scope.

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

And in the local scope.

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

As the ng-show for the first form looks in the local scope first it won't be affected even when you set the rootScope flag to false.

answered May 21 '15 at 15:39

Lavan

48
1
6

Thank you. I removed local scope flag but still both forms are visible. And when click the first form it disappears, as expected. Somehow the second form is not reading the flag. – madu May 21 '15 at 16:17
Just noticed, you specify the wrong number of arguments when you declare the MyCtrl. $scope and Upload in the injection list and then you also added $rootScope to the actual function parameters. – Lavan May 21 '15 at 18:47
That was the problem! Thank you. – madu May 23 '15 at 01:46

Using $rootscope to change ng-show between controllers

2 Answers2