AngularJS - Controller values not binding

Question

In my MVC program simple angular value controllers values are not binding. My code is as follows :

_Layout.cshtml

<body data-ng-app="ShoppingCartApp">   
     <div class="container body-content">
        @RenderBody()
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/Scripts/angular.js")
        @Scripts.Render("~/Scripts/Custom/App.js")
        @Scripts.Render("~/Scripts/Custom/ShoppingCartController.js")
        @RenderSection("scripts", required: false)
        <hr />
    </div>
</body>

App.js

var app = angular.module('ShoppingCartApp', []);

ShoppingCartController.js

app.controller('ShoppingCartController', function ShoppingCartController($scope, $http) {
    $scope.ShoppingCartObj.products = [];
    $scope.test = "ABC";

    // On load events
   // $scope.loadValues();
});

My Html Code is follows :

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script></script>
<h2>Index</h2>
Total {{2+2}} // This value workd FINE
<div ng-controller="ShoppingCartController">
    <div class="row">
        <div class="nav navbar-nav navbar-left">
            <h3>Total {{2+2}}</h3> // Not working THIS
        </div>
        <h1>{{test}}</h1> // Not working THIS

    </div>
</div>

When i try to access value in controller or access directive inside controller it's not working. What i miss in here?

Developer · Accepted Answer · 2016-08-28 06:47:39Z

2

Change your controller to:

app.controller('ShoppingCartController', function($scope, $http) {....});

Or create a function named ShoppingCartController and then pass it to controller:

app.controller('ShoppingCartController', ShoppingCartController);

Also change $scope.ShoppingCartObj.products to $scope.ShoppingCartObj = {}; and then add products to that object $scope.ShoppingCartObj.products = []; because, prev you havnt defined what $scope.ShoppingCartObj is, so this object will be undefined.

edited Aug 28, 2016 at 6:47

answered Aug 28, 2016 at 6:09

Developer

6,4703 gold badges20 silver badges24 bronze badges

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

4 Comments

Developer Over a year ago

Any error in console related to injection or any other errors?

DevT Over a year ago

yes there is.. Cannot set property 'products' of undefined

DevT Over a year ago

once i comment it, it works :) how can i resolve that?

Developer Over a year ago

Change $scope.ShoppingCartObj.products to $scope.ShoppingCartObj = {}; and then $scope.ShoppingCartObj.products = []; because, prev you havnt defined what $scope.ShoppingCartObj is, so this object will be undefined.

Tah · Accepted Answer · 2016-08-28 06:21:44Z

2

If you're using Bundler you need to specify the Dependency Injection values

Also - ShoppingCartObj isn't declared anywhere so you can't assign to a property products

app.controller('ShoppingCartController', ['$scope', '$http', 
    function ShoppingCartController($scope, $http) {
       $scope.ShoppingCartObj = {},
       $scope.ShoppingCartObj.products = [];
       $scope.test = "ABC";

}]);

Here's a working Jsfiddle

edited Aug 28, 2016 at 6:21

answered Aug 28, 2016 at 6:15

Tah

1,53614 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS - Controller values not binding

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related