使用$routeProvider进行动态路由和编译角度代码

Using $routeProvider for dynamic routing and compiling angular code

本文关键字:编译 代码 路由 动态 routeProvider 使用      更新时间:2023-09-26

这已经困扰了我好几天,我无法弄清楚这一点。我有一个网站在某些时候添加文章,所以我想我不应该在每次添加页面时都更改路由。所以我把它添加到我的项目中:

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

然后我将其用于页面Ctrl:

 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> 

除了我把 angular 代码放在那里时,一切都运行良好。 似乎它只会解析常规的 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);

以及其他几个什么都没做的事..

在视图中添加内容并让 Angular 指令正常工作的正确方法是什么?

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

页.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";
})

这是一个工作弹道