2

我正在尝试设置一个具有两个“视图区域”的页面，一个具有框架自动处理的标准 ng-view，一个自定义视图区域使页面的另一部分随着视图的变化而变化。我想我可以/应该用指令来做到这一点，但我对 Angular 还是很陌生，很难让它工作。

因此，例如，如果我有：

<body>
    <div class="fixed-menu">
        <nav>this never changes</nav>
        <fixed-menu-view></fixed-menu-view> <!-- this need to change with ng-view -->
    </div>
    <div class="content" ng-view> <!-- this changes with an update to the location/routeProvider -->
    </div>
</body>

ng-view 已经由 Angular 处理，但我需要一个分段模板，同时更新页面的另一部分，所以我正在尝试这个，但不确定如何传入 routeProvider 以获取当前的“页面”。

directive('fixedMenuView', function () {
    // Can't seem to pass in $scope or $routeProvider here
    return {
        restrict: 'E',
        replace: true,
        templateUrl: //computed from the current scope or routeprovider url,
        link: function (scope, element, attrs) {
        }
    }

});

有没有更好的方法来做到这一点，或者我可以在这里做些什么来完成我正在尝试的事情？

4

2 回答 2

4

我更喜欢使用事件消息而不是路由解析，原因有两个：

  1. 您正在使用您的网址进行依赖。
  2. 您将只能显示 URL 中定义的信息

我建议基于事件的另一种解决方案。首先在导航栏控制器中定义一些事件监听器：

$scope.$on('logout', function() {
    $scope.setLoggedOutBar();
});
$scope.$on('login', function() {
    $scope.setLoggedInBar();
});
$scope.$on('changeSelectedApp', function() {
    $scope.changeSelectedApp(myContextService.getSelectedApp());
});

然后在您的嵌套视图控制器中，您可以传播事件：

    $scope.$on('$routeChangeSuccess', function () {
        myContextService.setSelectedApp('main');
        $rootScope.$broadcast('changeSelectedApp');
    });

此解决方案的好处之一是其他组件可以捕获事件并更新其内容。

于 2013-08-24T08:27:50.550 回答
1

您可以route通过依赖注入将服务传递到指令中。这也是您能够注入任何其他附加服务等的方式。

文档中有更多信息，但不幸的是没有太多像样的例子：http ://docs.angularjs.org/guide/di

注入后，您可以通过以下方式访问当前路由$route.current：http ://docs.angularjs.org/api/ng.$ro​​ute

directive('fixedMenuView', ['$route', function ($route) {
    // Can't seem to pass in $scope or $routeProvider here
    return {
        restrict: 'E',
        replace: true,
        templateUrl: //computed from the current scope or routeprovider url,
        link: function (scope, element, attrs) {
            // Do something with $route.current here
        }
    }
});

在你的情况下，我会为指令创建一个“shell”模板，根据当前路由在里面切换，或者ng-include如果你有大量的路由可以容纳等。

于 2013-05-07T01:17:09.243 回答