尝试从索引页面路由到不同的视图模板。最初，主索引页面上的列表被加载，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;
})
});
即使模板立即加载，也不确定在第一次单击时不绑定数据的确切原因是什么。任何帮助或想法将不胜感激。一时间挠了挠头。