angular 使用 ng-include 进行路由

Question

描述我的内容有点复杂 problem.Now 我有两个页面要路由。一个是project.jsp，另一个是ticket.jsp。后者可以用ng-include包含在前者中。

在index.jsp中，我使用ng-view。

index.jsp

<div ng-view></div>

在 app.js 中，我进行路由配置并创建控制器。

$routeProvider.when('/tickets', {
    templateUrl: 'ticket.jsp',
    controller: 'ticketController',
    resolve:{
        data:function($http) {
        return $http.get('xxxxx').then(function(d){
            //success
            return d;
        },function(){
            //failure
        });
        }
    }
    }).when('/projects', {
    templateUrl: 'project.jsp',
    controller: 'projectController',
    resolve:{
        data:function($http) {
        return $http.get('xxxxx').then(function(d){
            //success
            return d;
        },function(){
            //failure
        });
        }
    }
    })


  app.controller('projectController', function($scope,data)
  {
        $scope.tickets=data.data;
  });
 app.controller('ticketController', function($scope,data)
  {
        if(data)
           $scope.tickets=data.data;
  });

project.jsp

<div ng-include="'ticket.jsp'" ng-controller="ticketController"></div>

ticket.jsp

<div>{{tickets}}</div>

现在，这是 problem.In 两个控制器，我必须注入数据但是当视图是 project.jsp 时，我必须在 ng-include 中声明 ticketController，这将导致 unknown provider 因为我注入 "data"。如果我不在 ng-include 中声明它，我将无法使用 controller.If我不注入"data",当前视图为ticket.jsp时无法访问数据.我真的confused.How 可以解决问题吗？

Answer 1

根据@Callum Linington 的说法，您创建了一个单例服务并在那里维护数据。

app.service('sharedData', function($q, $http){
    this.data = {};
    this.getData = function(url){
        var deferred = $q.defer();
        $http.get(url).then(function(d){
            //success
            this.data = d;
            deferred.resolve(d);
        },function(){
            //failure
            deferred.reject(d);
        });
       return deferred.promise;
    }
});

控制器

app.controller('projectController', function($scope, sharedData) {
    var url = 'http://example.com/project/get?param1=1&param2=2'
    if (sharedData.data.length <= 0) { //check does data exist
        //no then make a call to get data
        sharedData.getData(url).then(function(data) {
            //assign data
            $scope.tickets = data; //or $scope.tickets = sharedData.data
        });
    } else {
        $scope.tickets = sharedData.data; //yes then assign data directly
    }
});

app.controller('ticketController', function($scope, sharedData) {
    var url = 'http://example.com/ticket/get?param1=1&param2=2'
    if (sharedData.data.length <= 0) { //check does data exist
        //no then make a call to get data
        sharedData.getData(url).then(function(data) {
            //assign data
            $scope.tickets = data; //or $scope.tickets = sharedData.data
        });
    } else {
        $scope.tickets = sharedData.data; //yes then assign data directly
    }
});

使用上面的代码。可以帮助你。谢谢

Answer 2

您可以将 ng-view 用于您的公共路由（指路由快速发生的地方）。

如果您已经使用过 ng-view，那么请使用 ng-switch 作为第二个。

angular 使用 ng-include 进行路由

angular routing with ng-include

routing

angularjs

angularjs-routing

angularjs-http

angular-promise