2

我目前正在尝试与 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

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

4

3 回答 3

1

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

angular.module('app')
  .directive('ngRoute',['$routeProvider, function($routeProvider) {
   // etc,etc...
     };
   ]);
于 2013-06-03T03:55:51.287 回答
0

我也刚刚使用 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 会添加新路由并对其进行处理。

于 2014-01-09T18:33:20.417 回答
0

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

于 2013-06-03T10:59:58.827 回答