шаблон не отображает связанные данные после маршрутизации при первом нажатии - AngularJS

Попытка перейти к другому шаблону представления со страницы индекса. Первоначально загружается список на главной индексной странице, а main.html загружается в ng-view, отображая его текстовое содержимое. Данные из 'MainCtrl' передаются корректно и работают нормально. Теперь путаница заключается в том, что при щелчке элемента из списка он перенаправляется в шаблон содержимого (content.html), но содержимое не отображает связанное значение. при первом щелчке по списку. Но после второго щелчка он начинает показывать привязанные значения, передаваемые из MainCtrl.

<body ng-app="myApp">

  <div ng-controller="MainCtrl">
     <ul ng-repeat="value in msg" ng-click="setSelectedValue(value)">
         <li>
           <a href='#/content'>{{ value }}</a>
         </li>
     </ul>
   </div>

  <div ng-view=""></div>

основной.html:

<p>Select from the list.</p>

содержание.html:

//loads the selected item from the list on index page
<h3>Selected: {{ message }}</h3> 

angular
  .module('myApp', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/content', {
         controller: 'ContentCtrl',
        templateUrl: 'views/content.html'

      })
      .otherwise({
        redirectTo: '/'
      });
  })

.factory('myService', function($http, $rootScope){      
        var sharedService ={};
        sharedService.message = '';

        sharedService.prepforBroadcast = function(value){
            this.message = value;
            this.broadcastItem();
        };

        sharedService.broadcastItem = function(){
            $rootScope.$broadcast ('handleBroadcast');
        };

        return {
            sharedService: sharedService    
         };
})

  .controller('MainCtrl', function ($scope, myService) {
    $scope.msg = data; //this will be json data 
    $scope.selectedValue;

    $scope.setSelectedValue = function(value){
        $scope.selectedValue = value;
        myService.sharedService.prepforBroadcast(value);

    }
  })

.controller('ContentCtrl', function ($scope, myService) {
    $scope.$on('handleBroadcast', function(){
        $scope.message = myService.sharedService.message;
    })
});

Не уверен, что именно является причиной того, что данные не привязываются к самому первому клику, хотя шаблон загружается мгновенно. Любая помощь или мысль будет принята с благодарностью. Некоторое время чешу голову.


person Rajush    schedule 21.09.2014    source источник
comment
вероятно, это потому, что `ng-click=setSelectedValue(value)`   -  person Kalhan.Toress    schedule 21.09.2014


Ответы (2)


<ul ng-repeat="value in msg" ng-click="setSelectedValue(value)">

проверить без части ng-click="setSelectedValue(value)". похоже, что ваш щелчок будет обрабатываться функцией setSelectedValue(value)

person Kalhan.Toress    schedule 21.09.2014
comment
Без ng-click выбранное значение из списка даже не будет передано в службу. - person Rajush; 21.09.2014
comment
При первом щелчке content.html загружается нормально, но в ContentCtrl он никогда не попадает внутрь $scope.$on, а читает все за пределами $scope.$on. Только при втором щелчке и далее он попадает внутрь $scope.$on. Так и не смог понять, почему он так работает. - person Rajush; 21.09.2014

ng-repeat и ng-click должны быть на li.

 <ul>
     <li ng-repeat="value in msg" ng-click="setSelectedValue(value)">
       <a href='#/content'>{{ value }}</a>
     </li>
 </ul>
person Deepak N    schedule 21.09.2014
comment
Пробовал, разницы нет вообще. - person Rajush; 21.09.2014