Question

我目前正在尝试与AngularJS取得联系。由于我计划构建一个相当复杂的Web应用程序，因此我在ng文档中搜索了ngView / $ routeProvider组合的替代方法，因为我发现它们对于具有多个导航级别的复杂应用程序非常不满意。所以我尝试编写一个名为ngRoute的自定义指令，可以像这样使用：

<div ng-route="users">
    <div ng-route=":id"></div>
    <div ng-route></div><!-- default -->
</div>

我目前拥有的是以下指令定义：

angular.module('app').directive('ngRoute', function($routeProvider) {
    var getRoute = function($el) {
        var parts = [];
        var $curEl = $el;
        while($curEl.length > 0) {
            parts.unshift($curEl.attr('ng-route'));
            $curEl = $curEl.parent().closest('*[ng-route]');
        }
        return parts.join('/');
    }

    var directiveDef = {
            link: function(scope, $el, iAttrs, controller) {
                var route = getRoute($el);
                // Register route observer dependant on calculated route...
            }
    };
    return directiveDef;
});

不幸的是，由于路由观察注册所需的$routeProvider的DI，我收到错误：

Error: Unknown provider: appProvider <- app <- ngRouteDirective

我在这里错过了什么吗？另外，请随意批评我的方法（也许有人已经为我的问题找到了更好的解决方案）。

Answer 1

是的，我不太清楚这种方法，但不应该依赖注入：

angular.module('app')
  .directive('ngRoute',['$routeProvider, function($routeProvider) {
   // etc,etc...
     };
   ]);

Answer 2

我最终使用了angular-ui项目的路由器（http://github.com/angular-ui/ui-router）我发现它非常令人满意不幸的是，我仍然不知道为什么我的DI无法正常工作

Answer 3

我刚刚使用Angular版本1.2.7（发布日期的最新版本）遇到了这个问题。跳到ui-router很诱人，但我想我会提供一个工作（尽管有点hacky）我工作并且稳定。

首先像往常一样设置路线，但是将$ routeProvider添加到您的应用程序中：

app.config(function($routeProvider) {
$routeProvider.
  when('/a/route/here', {action:"someAction"}).
  otherwise({redirectTo:'index'});
app.routeProvider = $routeProvider;

}）;

然后在指令中根据需要添加其他路径：

app.routeProvider.when(...);

Angular会添加新路由，并在导航到它们时对其进行处理。

AngularJS $ routeProvider注入在指令中失败

3 个答案: