关于javascript：如何使用AngularJS模板呈现html


How to render html with AngularJS templates

这是我的模板：

1
  <ng:view></ng:view>

这是我的视图模板：

1
2
3
{{stuff.title}}

{{stuff.content}}

我把content作为HTML，我想在视图中显示它，但我得到的只是原始HTML代码。如何呈现该HTML？

相关讨论

使用-

1
<span ng-bind-html="myContent"></span>

你需要告诉安格尔不要逃避它。

相关讨论

To do this, I use a custom filter.

在我的应用程序中：

1
2
3
4
5
myApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);

然后，在视图中：

1
{{ stuff.title}}
相关讨论

在角4+中，我们可以使用innerHTML属性而不是ng-bind-html属性。

在我的例子中，它是有效的，我使用角5。

1
 

In.ts文件

1
let htmlContent = 'This is the `Bold` text.';
相关讨论

您应该遵循Angular文档并使用$sce-$sce是一个为AngularJS提供严格上下文转义服务的服务。这是一个文档：http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngbindhmlunsafe

让我们以异步加载EventBrite登录按钮为例。

在控制器中：

1
2
3
4
5
6
7
someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin',
  function($scope, $sce, eventbriteLogin) {

    eventbriteLogin.fetchButton(function(data){
      $scope.buttonLogin = $sce.trustAsHtml(data);
    });
  }]);

在您的视图中，只需添加：

1
<span ng-bind-html="buttonLogin"></span>

在您的服务中：

1
2
3
4
5
6
7
8
9
someAppServices.factory('eventbriteLogin', function($resource){
   return {
        fetchButton: function(callback){
            Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
                callback(widget_html);
            })
      }
    }
});

因此，您可能希望在index.html中包含此内容，以便使用视图加载库、脚本和初始化应用程序：

1
2
3
4
5
6
7
8
9
<html>
  <body ng-app="yourApp">
   
     
   
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js">
    <script src="script.js">
  </body>
</html>

那么yourview.html可以是：

1
2
3
4
  {{ stuff.h1 }}
  <p>
{{ stuff.content }}
</p>

scripts.js可以让你的控制器拥有数据$scope'd。

1
2
3
4
5
6
7
angular.module('yourApp')
    .controller('YourCtrl', function ($scope) {
      $scope.stuff = {
        'h1':'Title',
        'content':"A paragraph..."
      };
    });

最后，您必须为$scope(即您的数据对象)配置路由并将控制器分配给View。

1
2
3
4
5
6
7
8
angular.module('yourApp', [])
.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/yourView.html',
      controller: 'YourCtrl'
    });
});

我还没有测试过这个，如果有错误的话很抱歉，但我认为这是获取数据的倾斜方式

相关讨论