Question

尝试从索引页面路由到不同的视图模板。最初，主索引页面上的列表被加载， main.html 被加载到ng-view中，显示它的文本内容。来自＆MainCtrl＆＃39;的数据播放得当，播放得很好。现在，令人困惑的是，当点击列表中的项目时，它会被路由到内容模板（ 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>

main.html中：

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

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

即使模板立即加载，也不确定在第一次单击时不绑定数据的原因究竟是什么。任何帮助或想法将不胜感激。抓了我一会儿。

Answer 1

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

检查ng-click="setSelectedValue(value)"部分。似乎你的时钟将由setSelectedValue(value)函数

处理

Answer 2

ng-repeat和ng-click应该在li上。

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

第一次单击后，模板在路由后不显示绑定数据 - AngularJS

2 个答案: