2017-02-21 63 views
1

我有兩個控制器具有相同的數據,具體取決於語言選擇控制器將加載。當一個項目被點擊列表項目正在加載,但問題是當其他項目被點擊時角度準備功能不起作用和我以前看到加載項只角度準備功能不起作用

.controller('EnCtrl', function($scope,sharedCartService) { 
var cart = sharedCartService.cart;  
$scope.menu_items=[ 
      {"p_id":"1", 
      "p_name":"coffe ", 
      "p_image_id":"coffe", 
      "p_price":"50" 
      }, 
      {"p_id":"2", 
      "p_name":"Tea", 
      "p_image_id":"Tea", 
      "p_price":"50" 
      }, 
      {"p_id":"3", 
      "p_name":"Masala", 
      "p_image_id":"Masala", 
      "p_price":"50" 
      }]; 


      $scope.showProductInfo=function (id,img,name,price) {  
      sessionStorage.setItem('product_info_id', id); 
      sessionStorage.setItem('product_info_img', img); 
      sessionStorage.setItem('product_info_name', name); 
      sessionStorage.setItem('product_info_price', price); 
      window.location.href = "#"; 
     }; 


     $scope.addToCart=function(id,image,name,price){ 
       cart.add(id,image,name,price,1); 
     }; 
    }) 

Kctrl

.controller('kCtrl', function($scope,sharedCartService) { 
var cart = sharedCartService.cart; 

    $scope.menu_items=[ 
     { "p_id": "1", 
     "p_name": "ಕಾಫಿ", 
      "p_image_id": "coffe", 
     "p_price": "50" 
     }, 
     { "p_id": "2", 
      "p_name": "ಚಹಾ", 
      "p_image_id": "Tea", 
     "p_price": "50" 
     }, 
     { "p_id": "3", 
     "p_name": "ಮಸಾಲಾ", 
     "p_image_id": "Masala", 
     "p_price": "50" 
     }];  

     $scope.showProductInfo=function (id,img,name,price) { 
     sessionStorage.setItem('product_info_id', id); 
     sessionStorage.setItem('product_info_img', img); 
     sessionStorage.setItem('product_info_name', name); 
     sessionStorage.setItem('product_info_price', price); 
     window.location.href = "#"; 
    }; 


    $scope.addToCart=function(id,image,name,price){ 
      cart.add(id,image,name,price,1); 
    }; 
}) 

產品控制器

.controller('productCtrl', function($scope) { 
//onload event 
    angular.element(document).ready(function() { 
     $scope.id= sessionStorage.getItem('product_info_id'); 
     $scope.img= "img/"+ sessionStorage.getItem('product_info_img')+".jpg"; 
     $scope.name= sessionStorage.getItem('product_info_name'); 
     $scope.price= sessionStorage.getItem('product_info_price'); 
    }); 

En.html

<ion-list ng-repeat="item in menu_items" > 
      <h2 ng-click="showProductInfo(item.p_id,item.p_image_id,item.p_name,item.p_price)" > {{item.p_name}} </h2> 
    <p ng-click="showProductInfo(item.p_id,item.p_image_id,item.p_name,item.p_price)">{{item.p_price}}</p> 
     </ion-list> 

Productpage.html

<div> 
       <p> {{name}}</p> 
       <p>{{price}}</p> 
       </div> 

更新comments.When後一個項目被點擊dataupdate消息displayed.Item信息沒有得到

controller('EnCtrl', function($scope,sharedCartService,$rootScope) { 
var cart = sharedCartService.cart;  
$scope.menu_items=[ 
      {"p_id":"1", 
      "p_name":"coffe ", 
      "p_image_id":"coffe", 
      "p_price":"50" 
      }, 
      {"p_id":"2", 
      "p_name":"Tea", 
      "p_image_id":"Tea", 
      "p_price":"50" 
      }, 
      {"p_id":"3", 
      "p_name":"Masala", 
      "p_image_id":"Masala", 
      "p_price":"50" 
      }]; 


      $scope.showProductInfo=function (id,img,name,price) { 
      $rootScope.$broadcast('dataUpdate', {id: id,img: img,name: name,price: price}) 
      window.location.href = "#"; 
     }; 


     $scope.addToCart=function(id,image,name,price){ 
       cart.add(id,image,name,price,1); 
     }; 
    }) 

產品控制器

.controller('productCtrl', function($scope,$rootScope) { 
$rootScope.$on('dataUpdate', function(data) { 
     $scope.id = data.id; 
      $scope.img = data.img; 
     $scope.name = data.name; 
     $scope.price=data.price; 
}) 
}) 

Plunker演示 https://plnkr.co/edit/zhvBzOzDtgOiTEGjBqAp?p=preview

回答

1

其實.ready方法是沒有棱角的功能,但jqLit​​e方法(或jQuery的方法,如果你提供它的頁面上;默認情況下角使用jqLit​​e,但如果你包含jQuery,它將被用來代替)。 angular.element(document)返回一個包裹在jqLit​​e對象中的元素,ready是此對象的方法。回到你的主要問題:當DOM完全加載時,'ready'方法回調只會被調用一次,直到下一次頁面重新加載時纔會再次調用它。請檢查文檔ready method

您可以在Click處理程序中用$ rootScope上的數據廣播事件,然後在事件偵聽器的另一個控制器中訪問此數據。 所以在您單擊處理程序做到這一點:

$rootScope.$broadcast('dataUpdate', {id: id, name: name, img: img, price: price}) 

並在產品控制器添加此(使用事件數據以更新控制器$範圍):後評論問題

$rootScope.$on('dataUpdate', function(data) { 
     $scope.id = data.id; 
     $scope.img = data.img; 
     $scope.name = data.name; 
     ... 
}); 

更新

您必須將$rootScope注入到您要使用它的每個控制器中:

.controller('EnCtrl', function($scope,sharedCartService, $rootScope) { 
... 
.controller('productCtrl', function($scope, $rootScope) { 

答案更新

我注意到你在點擊處理程序中重定向。所以請儘量只刪除ready處理程序,以便您的控制器讀取localStorage的每一個它的初始化時間:

.controller('productCtrl', function($scope) { 
     $scope.id= sessionStorage.getItem('product_info_id'); 
     $scope.img= "img/"+ sessionStorage.getItem('product_info_img')+".jpg"; 
     $scope.name= sessionStorage.getItem('product_info_name'); 
     $scope.price= sessionStorage.getItem('product_info_price'); 
} 
+0

謝謝。任何其他類似於ng-click的示例我都應該得到該項目的相關信息 – user3698911

+0

@ user3698911請參閱更新的答案 –

+0

否控制器中沒有親子關係 – user3698911

1

@ user3698911,除了@Bartek Fryzowicz的回答,

您可能還需要查看:

從角

angular.element

注:

(deprecated, use angular.element(callback) instead of angular.element(document).ready(callback))