Question

请在此处查看我的plunkr

https://plnkr.co/edit/hk7Z0jMwOfoUwJZ98F7a?p=preview

在我的app.js中，我有两个控制器和一个具有TestController决心的routeprovider

var app = angular.module('app', ['ngRoute']);


app.controller('DefaultController', ['$scope', function($scope){
  $scope.welcome = "Hello World";  
}]);

app.controller('TestController', ['$scope', 'context', '$routeParams', function($scope, context, $routeParams){
  $scope.text = "TestController loaded!"  
}]);

app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
  $routeProvider.
    when('/test1',{
      templateUrl: 'test1.html',
      controller: 'TestController',
      resolve: {
        context: function(){return 'test';}
      }
    })
}])

在我的html中，我有一个ng-include，它还应该在默认视图中加载test.html

 <body ng-controller="DefaultController">
    <h1>{{welcome}}</h1>

    <div ng-include="'test.html'" ng-controller='TestController'></div>


  </body>

我无法解决routeProvider的问题，因为当用户进入'../ test'时我仍然需要它...

有什么方法可以解决ng-include中的contextProvider？

还是有更好的方法吗？

非常感谢任何帮助。

Answer 1

创建工厂/服务并使用：

app.factory('fooResolver', function() {
    return {
        resolveMe: function() {
            return 'test';
        }
    }
});

现在，在路由器配置中使用它：

app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
  $routeProvider.
    when('/test1',{
      templateUrl: 'test1.html',
      controller: 'TestController',
      resolve: {
        context: function(fooResolver) {
             return fooResolver.resolveMe();
        }
      }
    })
}])

在你的控制器中做同样的事情：

app.controller('TestController', ['$scope', 'fooResolver', '$routeParams', function($scope, fooResolver, $routeParams){
  $scope.text = "TestController loaded!"
  var context = fooResolver.resolveMe();
}]);

使用ng-include调用控制器时，AngularJS路由解析

1 个答案: