我正在尝试设置一个具有两个“ View 区域”的页面，一个具有框架自动处理的标准 ng-view，另一个是自定义 View 区域，以便随着更改而更改页面的另一部分在 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) {
}
}
});
是否有更好的方法来做到这一点，或者我可以在这里做什么来完成我正在尝试的事情？
最佳答案
我更喜欢使用事件消息而不是路由解析，原因有两个:
- 您正在与您的网址建立依赖关系。
- 您将只能显示网址中定义的信息
我建议另一种基于事件的解决方案。首先在导航栏 Controller 中定义一些事件监听器:
$scope.$on('logout', function() {
$scope.setLoggedOutBar();
});
$scope.$on('login', function() {
$scope.setLoggedInBar();
});
$scope.$on('changeSelectedApp', function() {
$scope.changeSelectedApp(myContextService.getSelectedApp());
});
然后在嵌套 View Controller 中，您可以传播事件:
$scope.$on('$routeChangeSuccess', function () {
myContextService.setSelectedApp('main');
$rootScope.$broadcast('changeSelectedApp');
});
此解决方案的好处之一是其他组件可以捕获事件并更新其内容。
关于templates - Angular SubViews/多区域模板、指令和动态模板 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16406594/