Question

这已经困扰了我好几天了，我无法解决这个问题。我有一个网站，在某些点添加文章，所以我想我不应该每次添加页面时更改路由。所以我把它添加到我的项目中：

 $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);

和其他一些根本没有做任何事情的人......

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

Answer 1

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

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

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

1 个答案: