$ rootScope. $ Broadcast не работает

Question

Я пытаюсь получить $ rootScope. $ Broadcast для обновления моего представления. служба

это-

var app = angular.module("productsApp", []) 
    .service("serviceProvider", function ($http) { 
     this.getDatas = function getDatas(data) { 
      return $http({ 
       method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: { 
        'Authorization': apiKey 
       }, 
       data: data 
      }) 
     } 
     return this 
    }).factory("sharedService", function ($rootScope) { 

     var mySharedService = {}; 

     mySharedService.values = []; 

     mySharedService.passData = function (newData) { 
      mySharedService.values = newData; 
      $rootScope.$broadcast('dataPassed', newData); 
     } 

     return mySharedService; 
    }); 

Вызов через контроллер-

function searchProductsController($scope, $window, serviceProvider, sharedService) { 
    $scope.submit = function() { 
     var data = { "query": $scope.searchText, "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" }; 
     serviceProvider.getDatas(data).then(function (response) { 
      var result = response; 
      sharedService.passData(result.data.data); 
     }); 
    } 
}; 

здесь, в этом контроллере sharedService.passData который проходит новый массив метода обслуживания. Затем он пытается передать его для изменений с помощью строки. $rootScope.$broadcast('dataPassed', newData)

Я не знаю, почему он не передает изменения для просмотра. Есть ли другой способ трансляции изменений?

Примечание- Мой предыдущий вопрос How to transfer data between controllers не мог получить мне любую помощь.

Редактировать

До сих пор я изменил в listeners-

mySharedService.passData = function (newData) { 
    $rootScope.$broadcast('dataPassed', newData) 
} 
$rootScope.$on('dataPassed', function (newData) { 
    mySharedService.values = newData; 
}) 

Но до сих пор не может получить обновленный вид.

Answer 1

При использовании $ радиопередачу или $ испускают. У вас должно быть $ scope. $, Чтобы прослушать это событие.

$scope.$on('dataPassed', function(){ //code go here }); 

Edit: Update рабочий код для требования вопроса

var app = angular.module("productsApp", []) 
    .service("serviceProvider", function ($http) { 
     this.getDatas = function getDatas(data) { 
      return $http({ 
       method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: { 
        'Authorization': apiKey 
       }, 
       data: data 
      }); 
     } 
     return this 
    }).factory("sharedService", ['$rootScope', function ($rootScope) { 
     var mySharedService = { 
      values: [], 
      setValues: function(data){ 
       if(data){ 
        mySharedService.values.length = 0; 
        data.forEach(function(item){ 
         mySharedService.values.push(item); 
        });  
       } 
      } 
     }; 
     return mySharedService; 
    }]);  
function GetController($scope, serviceProvider, sharedService, $rootScope) { 
    var shareData = sharedService; 
    $scope.products = sharedService.values; 
    $scope.shareData = sharedService; 
    var data = { "query": "grocery", "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" }; 
    serviceProvider.getDatas(data).then(function (response) { 
     sharedService.setValues(response.data.data); 
    }); 
} 
function searchProductsController($scope, $window, serviceProvider, sharedService, $rootScope) { 
    $scope.submit = function() { 
     var data = { "query": $scope.searchText, "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" }; 
     serviceProvider.getDatas(data).then(function (response) { 
      sharedService.setValues(response.data.data); 
     }); 
    } 
}; 

Answer 2

Вы должны слушать то, что вы вещания:

$rootScope.$on('dataPassed', function(data){ 
console.log(data); 
}); 

Эта ссылка может помочь: Why do we use $rootScope.$broadcast in AngularJS?

Answer 3

Вы должны поставить слушателей слушать broadbasted события. Событие Broadcasted не будет напрямую обновлять ваши данные просмотра непосредственно в представлении html. Вы должны использовать $on над областью действия для привязки событий к области. Внутри функции обратного вызова. Вы получите выгоду, чтобы получить переданные данные & re assign, которые снова возвращают данные в переменную области видимости, чтобы получить обновленную привязку.

Код

var app = angular.module("productsApp", []) 
    .service("serviceProvider", function($http) { 
    this.getDatas = function getDatas(data) { 
    return $http({ 
     method: 'POST', 
     url: serviceUrl + '/GetProductsByCategoryOrName', 
     headers: { 
     'Authorization': apiKey 
     }, 
     data: data 
    }) 
    } 
    return this; 
}).factory("sharedService", ['$rootScope', function($rootScope) { 

    var mySharedService = {}; 

    mySharedService.values = []; 

    mySharedService.passData = function(newData) { 
    mySharedService.values = newData; 
    $rootScope.$broadcast('dataPassed', newData) 
    } 

    return mySharedService; 
}]); 

function GetController($scope, serviceProvider, sharedService, $rootScope) { 
    var data = { 
    "query": "grocery", 
    "categoryId": "976759", 
    "pageIndex": 0, 
    "sortDirection": "asc" 
    }; 
    serviceProvider.getDatas(data).then(function(response) { 
    sharedService.passData(response.data.data); 
    }); 
    //listener should register when controller loads 
    $scope.$on('dataPassed', function(event, newData) { 
    sharedService.values = newData; 
    $scope.products = sharedService.values; 
    }) 
} 

function searchProductsController($scope, $window, serviceProvider, sharedService, $rootScope) { 
    $scope.submit = function() { 
     var data = { 
     "query": $scope.searchText, 
     "categoryId": "976759", 
     "pageIndex": 0, 
     "sortDirection": "asc" 
     }; 
     serviceProvider.getDatas(data).then(function(response) { 
     var result = response; 
     sharedService.passData(result.data.data); 
     }); 
    } 
    //listener should register when controller loads 
    $scope.$on('dataPassed', function(event, newData) { 
     console.log(newData); 
     sharedService.values = newData; 
    }) 
}; 

Answer 4

@Manoz, как для вас предыдущий ответ тоже, я дал вам ответ. Я также обновил плункер. А что касается использования $rootscope., у вас есть 2 параметра, в которых одно событие, а следующее - данные, которые вы передаете. Я издевался над вашим апи-вызовом в обоих ответах, чтобы вы поняли больше.

Вот plunker с помощью $rootscope: http://plnkr.co/edit/MBzDMRll5Z4CjusY5QLN?p=preview

<html> 

    <head> 
     <title>Angular JS Controller</title> 
     <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    </head> 

    <body> 
     <h2>AngularJS Sample Application</h2> 

     <div ng-app = "app" > 

      <div ng-controller="searchProductsController"> 
      <input ng-model="searchText"/> 
       <button ng-click="setPlace(searchText)">Enter Search id</button> 
      </div> 
      <div ng-controller="GetController"> 
       <div ng-repeat="product in products"> 
           <h3>{{product.name}}</h3> 
       </div> 
       </div> 
     </div> 


<script> 
     var app = angular.module('app', []); 
     app.run(['$rootScope', function($rootScope){ 
       $rootScope.test = 123; 
      }]); 

     app.factory("Service", function ($rootScope) { 
      function passData(newData) { 
       alert('i am here'); 
       $rootScope.$broadcast('dataPassed', newData); 
      } 
      return { 
       passData: passData 
      } 
     }).factory("dataService",function($http){//mock for getting values from api 
      return{ 
      getComments:function (roomid){ 
        if(roomid==1){ 
        var data = [{"name":"alex","place":"kathmandu"},{"name":"god","place":"seattle"}]; 
        return data; 
        } 
        if(roomid==2) 
        { 
        var newdata = [{"name":"newname","place":"kathmandu"},{"name":"newname2","place":"seattle"}]; 
        return newdata; 
        } 
       } 
      } 
     }); 
     app.controller('searchProductsController',function($scope, Service,$http,dataService) { 
      $scope.setPlace = function (searchText) { 
       var newdata = dataService.getComments(searchText); 
       Service.passData(newdata); 
      } 
     }) 
     .controller('GetController',function($scope, Service,$rootScope) { 
      $rootScope.$on('dataPassed', function (event,args) { 
       $scope.products = args; 
      }) 
     }) 
       </script> 

    </body> 
</html>