Question

描述我的问题有点复杂。现在我有两个页面被路由。一个是 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>

现在，问题就出现了。在两个控制器中，我必须注入数据，但是当视图是project.jsp时，我必须在ng-include中声明ticketController，这将是导致未知提供商，因为我注入＆＃34;数据＆＃34;。如果我没有在ng-include中声明它，我就无法使用控制器。如果我不＆＃ 39; t注入＆＃34;数据＆＃34;，当前视图是ticket.jsp时，我无法访问数据。我真的很困惑。我该如何解决这个问题？

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作为第二个。

使用ng-include进行角度路由

2 个答案: