Understanding $scope mechanics in Angularjs

Question

I can't clarify for myself how to deal with $scope in Angularjs. Although I've resolved my current issue other way, still I need help to get comprehension of $scope usage.

I have the following form (simplified for this example). Index.html:

<form class="form-horizontal" ng-controller="AddItemController as addItemCtrl">
  <fieldset>
    <legend>New item</legend>
    <div class="form-group">
      <label for="submittedBy" class="col-lg-2 control-label">Submitted by</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="submittedBy" ng-model="addItemCtrl.item.submitted_by" placeholder="Your name here">
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
        <!--button class="btn btn-default">Cancel</button-->
        <button type="submit" class="btn btn-primary" ng-click="addItemCtrl.addItem()">Submit</button>
      </div>
    </div>
  </fieldset>
</form>

app.js:

    app.controller("AddItemController", ['$scope','$http', function ($scope, $http) {
    $scope.item = {};

    this.addItem = function() {
        $http({
            url: "add_item",
            method: "GET",
            params: this.item
         }).
        success(function(data, status, headers, config) {
            var table = angular.element($("#body")).scope();
            table.items = data;
        });
        **this.item={};**
    }
}]);

All I want is to get data from the form, send it to the server, get response, update table and then clear the form. The last part is my issue. I am currenly using this.item={} to handle it. But I do want to call it using $scope, so it should be $scope.item={} and then I want to move it inside addItem function. Unfortunately it's not working for either case.

I have this code and it is working as intended, but it seems I just got lucky/unlucky to make it without understanding mechanism.

app.controller('ItemController', ['$scope','$http', function ($scope, $http) {
    function getItems(){
        $http({
                url: "get_items",
                method: "GET"
             }).
            success(function(data, status, headers, config) {
                $scope.items = data;
            });
    }
    getItems();
}]);`

UPDATE. This is how my AddItemController looks like at the moment:

app.controller("AddItemController", ['$scope','$http', function ($scope, $http) {
    $scope.item = {};

    this.addItem = function() {
        $http({
            url: "add_item",
            method: "GET",
            params: this.item
         }).
        success(function(data, status, headers, config) {
            $scope.$$prevSibling.items = data;
            $scope.addItemCtrl.item={};
        });
    }
}]);

It works like I wanted it to. But I don't like $scope.$$prevSibling.items = data; statement, I use it to refresh table which is handled by ItemController, is there a more elegant way to do that?

because each your controller creating their own $scope , thats why you are messing it , you changing your data in other scopes — Narek Mamikonyan
– Narek Mamikonyan, Commented Sep 3, 2014 at 14:11
@NarekMamikonyan do you mean these lines: var scope= angular.element($("#body")).scope(); scope.items = data; If so, I have renamed it in the example, so it doesn't mess with my main issue — Oleg
– Oleg, Commented Sep 3, 2014 at 14:19
@NarekMamikonyan Then I can't follow you. ItemController is responsible for the table and using its $scope works fine. AddItemController was implemented for the form handling, so yes, it should have it's own $scope — Oleg
– Oleg, Commented Sep 3, 2014 at 14:44
Using $scope.item={} inside the success callback should work. Are you sure that the problem is on that call? Is there any error in the console? — bmleite
– bmleite, Commented Sep 3, 2014 at 16:09
@bmleite it says that there is an object $scope, but nothing is happening and there are no errors shown wherever I put $scope.item={} — Oleg
– Oleg, Commented Sep 3, 2014 at 19:40

Mohamed Seif · Accepted Answer · 2014-09-03 22:08:09Z

2

You don't have to make getItem function, you can just write $http code and it will just work fine, about $scope, just don't use this, it's kind of tricky here, all the variables you want to make just make it with $scope and get it from $scope like this

   $scope.item;
   $scope.item.getItem = function(){};
   var item1 = $scope.item;

And so on.

answered Sep 3, 2014 at 22:08

Mohamed Seif

4201 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oleg Over a year ago

About getItem I know, I was just playing with syntax and at some point wanted to move getItem outside to make it available from other controllers. I failed though, so it's where it is at the moment till I am back to it.

Collectives™ on Stack Overflow

Understanding $scope mechanics in Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related