Wednesday 24 May 2017

How to initialize angularjs controller in asp.net mvc or ROR

I wanted to know that how would i refresh or initialize controller from child controller.i'm using Angularjs in Asp.net mvc and ROR so i'm not using state/rout providers on that. i need to call Angular's factory method for Add to Cart and show cart in head view and product listing view.

Example

`

angular.module('MainModule', [])
.factory('Cart', function ($location) {
        var myCart = new ShoppingCart('MyShop');
        return {
            cart: myCart
        };
});

NOTE: my cart has prototypes which is too lengthy so return cart is returning values which will scope needs.

This is my cart managment code in a factory method which will i use at head section and product listing section

2) Adding Code at head section

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


//Controller For Navbar
app.controller('NavbarCtrl', function($scope, $http,Cart,$rootScope) {
     $rootScope.cart = Cart.cart;
});

3) at Head html

 <ul ng-app="ShopNav" class="nav navbar-nav navbar-right" ng-controller="NavbarCtrl" >
    <li class="hidden-xs hidden-sm userprofile-rightside cartdropdown dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
    <span class="noti-box"></span></a>
    </li>
 </ul>

4) My product listing and Add to cart

   var app = angular.module('myApp', ["MainModule"]);
app.controller('myCtrl', function($scope,Cart,$rootScope, $http) {
$rootScope.cart = Cart.cart;
  $scope.RemoveThis = function (product) {

        $scope.cart.addItem({ sku: product.product_id}, -10000000);
        window.location.reload();
    }
$scope.AddTocart = function (product) {
       $scope.cart.addItem(
        { sku: product.product_id,
          name: product.title,
          slug:product.paramlink, 
          mrp: product.price, 
          price: product.price, 
          quantity: 1, 
          image: product.company_logo.thumb.url, 
          weight: 0 }, true);
       window.location.reload();
    };
});

Here is my product Html.

<ul>
              <li class="clearfix" ng-repeat="y in x.Download">
 <span ng-if="!checkCart(y.product_id)" class="checkbox-btn">
                      <input  type="checkbox" ng-click="AddTocart(y)" value="value-1" id="rc">


                      <label for="rc" onclick=""></label>
                    </span> 
                    <span ng-if="checkCart(y.product_id)" class="checkbox-btn">
                      <input  type="checkbox" ng-checked="true" ng-click="RemoveThis(y)" value="value-1" id="rc">


                      <label for="rc" onclick=""></label>
                      </span>  
</li>
<ul>

So problam is that when i click on Add to cart button or remove cart button then i have to refresh browser for initialize NavbarCrl controller.



via Omprakash Amarwal

No comments:

Post a Comment