Javascript 角度准备功能不工作

我有两个控制器，根据语言选择控制器将加载相同的数据。当单击列表上的某个项目时，该项目正在加载，但问题是当单击其他项目时，angular ready功能不起作用，我只看到以前加载的项目

   .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('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');
    });

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

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>   

产品控制器

.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');
    });

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

普朗克演示

---

实际上

.ready

方法不是Angular函数，而是jqLite方法（如果您在页面中包含jqLite方法，则为jQuery方法；默认情况下，Angular使用jqLite，但如果您包含jQuery，则将使用jqLite方法）

angular.element（document）

返回包装在jqLite对象中的元素，

ready

是该对象的方法。回到您的主要问题：“ready”方法回调在DOM完全加载时只调用一次，在下一页重新加载之前不会再次调用。请检查您的文件

您可以在click handler中的$rootScope上广播一个事件，然后在事件侦听器的另一个控制器中访问该数据。 因此，在“处理程序”中，请执行以下操作：

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

并在产品控制器中添加以下内容（使用事件数据更新控制器$scope）：

评论问题后更新

您必须将

$rootScope

注入到要使用它的每个控制器中：

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

答案更新 我注意到您在单击处理程序中重定向。因此，请尝试删除

ready

处理程序，以便控制器每次初始化时都读取本地存储：

.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');
}

---

@用户3698911，除了@Bartek Fryzowicz的答案

您可能还想看看：

来自angular的注释：

（已弃用，请使用angular.element（回调）而不是 元素（文档）.ready（回调））

---

非常感谢。这方面的任何其他示例，如在ng click上，我应该获得与项目相关的信息否控制器中没有父子关系OK，请参阅更新的答案。无论控制器之间的关系如何，所描述的解决方案都将起作用。isI尝试使用它获取$broadcast TypeError的TypeError：无法读取Undefinedy的属性“$broadcast”。您必须将$rootScope注入控制器才能使用它

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

.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');
}