[AngularJS]angularjs︰ 获取路线解决外部模板数据

发布时间: 2017/4/16 21:50:44
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

在加载上 '/',我得到 '内容' 和 ' sidebar'using 'myService' 和解决选项在路线提供商和我可以呈现 '内容' 到模板 ($scope.contents = 内容;)。

但 $scope.sideBar = 侧边栏;不工作。这是因为侧边栏是模板之外吗?

如何可以呈现侧边栏上加载的项目 '/'?是否可能将此数据 (侧边栏) 传递给 indexCtrl?

app.js

var myApp = angular.module("MyApp", ['ngRoute']);

myApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'contents.html',
        controller: 'Myctrl',
        resolve: {
            content: function(myService){
                return myService.getContent();
            },
            sideBar: function(myService){
                return myService.getSideBar();            
            }    
          }           
      }).
      otherwise({
        redirectTo: '/'
      });
}]);


myApp.controller('Myctrl', function (content, sideBar, $scope) {    
    $scope.contents = content;
    $scope.sideBar = sideBar;
});

myApp.controller('indexCtrl', function($scope) { 


});


myApp.service("myService", function () {     
    this.getContent = function () {
       return 'Main contents';
    }    

    this.getSideBar = function () {
       return 'side bar'    
    }    
});

index.html

<div ng-app="MyApp" ng-controller="indexCtrl">

            <div class="sidebar">
                {{sideBar}}
            </div>        

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

contents.html

<div>{{contents}}</div>

解决方法 1:

你可以你的 myService 注入你的 indexCtrl 和访问函数 getSideBar 像这

myApp.controller('indexCtrl', function($scope, myService) { 

 $scope.sideBar = myService.getSideBar();
});

你的 indexCtrl 第一次初始化时,这将从您的 getSideBar 函数获取字符串。如果你这样做︰

myApp.controller('indexCtrl', function($scope, myService) { 

 $scope.sideBar = myService.getSideBar;
});

和内部 index.html:

 <div class="sidebar">
     {{sideBar()}}
 </div>  

该字符串将更新您的服务中的数据更新时。

赞助商