zoukankan      html  css  js  c++  java
  • angularjs中使用ng-bind-html和ng-include

    下面这个例子,往div标签内添加html内容:

    <!doctype html>
    <html ng-app="myApp">
    <head>
      <meta charset="UTF-8">
      <title>demo</title>
      <script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
      
    </head>
    <body ng-controller="ctrl">
        <div ng-bind-html="myText"></div>
    <script>
    var app = angular.module('myApp',[]);
    app.controller("ctrl",function($scope,$sce){
        $scope.myText = $sce.trustAsHtml("<b>粗体内容</b><br/><i>斜体内容</i>");
    });
    </script>
    </body>
    </html>

    注意在赋值时需要将html用$sce.trustAsHtml作一个处理,不然页面会报错,无法输出内容。

    下面是ng-include的使用示例,跟上面的例子差不多,只是把要添加的html内容放到一个文件中:

    <!doctype html>
    <html ng-app="myApp">
    <head>
      <meta charset="UTF-8">
      <title>demo</title>
      <script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
      
    </head>
    <body ng-controller="ctrl">
        <div ng-include="'demo1_1.html'"></div>
    <script>
    var app = angular.module('myApp',[]);
    app.controller("ctrl",function($scope){});
    </script>
    </body>
    </html>

    demo1_1.html

    <b>粗体内容222</b><br/><i>斜体内容222</i>
  • 相关阅读:
    drf序列化组件
    drf入门规范
    vue发送ajax请求与跨域问题
    Vue对象提供的属性功能
    vue.js库的下载与使用
    admin后台管理与media配置
    Auth认证模块
    学习总结3月11日
    学习总结3月10日
    基于 Spark 的物流企业数据仓库 的设计与实现
  • 原文地址:https://www.cnblogs.com/modou/p/5879781.html
Copyright © 2011-2022 走看看