使用 $routeProvider 进行动态路由和编译 Angular 代码答案

【问题标题】：Using $routeProvider for dynamic routing and compiling angular code使用 $routeProvider 进行动态路由和编译 Angular 代码
【发布时间】：2014-12-03 00:02:47
【问题描述】：

这已经困扰我好几天了，我无法弄清楚。我有一个网站在某些点添加文章，所以我认为我不应该每次添加页面时都需要更改路由。所以我将此添加到我的项目中：

 $routeProvider.when ('/pages/:page', { templateUrl: 'page.html', controller: 'pageCtrl' });

然后我将它用于pageCtrl：

 app.controller('pageCtrl', function ($scope, $http, $q, $routeParams, $sce, $location) {
  $http.get("partials/" + $routeParams.page + ".html")
  .then(function(ret) {
    $scope.content = $sce.trustAsHtml(ret.data);
  }, function(err) {
    $location.path("/404")
  });
 });

然后在网页中我放了一个

 <div ng-view ng-bind-html="content">{{content}}</div>

除了我把角度代码放在那里之外，一切都很好。似乎它只会解析常规的 html 代码，但不会解析 ng-stuff。我想我应该在某个地方放一个 $compile 。但我尝试了所有我能想到的组合，但都没有奏效。

我尝试过的事情：

 $scope.content = $compile($sce.trustAsHtml(ret.data))($scope);

 var e=angular.element($sce.trustAsHtml(ret.data));
 c=$compile(e);
 $scope.content = c;
 c($scope);

还有其他几个根本没有做任何事情的人..

在视图中添加内容并使角度指令正常工作的正确方法是什么？

【问题讨论】：

为什么不能只添加到视图中：<div ng-include="page"></div> 并设置 $scope.page = $routeParams.page;
我认为 ng-include 仅适用于页面加载。如果您之后在路由中加载页面，它将重新进入控制器，直到遇到错误：Error: error:infdig Infinite $digest Loop

标签： javascript angularjs dynamic compilation routes

【解决方案1】：

这应该适用于您的page.html 模板中的ng-include：

page.html:

<h1>Page {{name}}</h1>
<div ng-include="contentUrl"></div>

那么您的pageCtrl 可以将这些设置为：

app.controller("pageCtrl", function($scope, $routeParams){
  $scope.name = $routeParams.page;
  $scope.contentUrl = $routeParams.page + ".html";
})

这是一个有效的plunker

【讨论】：

实际上这就像一个魅力。我想我试过了，但得到了无限循环错误。可能在某处打错了。复制/粘贴成功了！谢谢:)
快速添加。因为此方法无法检测页面是否实际存在，所以我将其添加到控制器以将其重定向到我的自定义 404 页面：` $scope.$on('$includeContentError', function(event) { $location.path( "/404"); console.log("Error"); });`