如果您对ng-bind-html与bind-html-compile？感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于ng-bind-html与bind-html-compi
如果您对ng-bind-html与bind-html-compile？感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于ng-bind-html与bind-html-compile？的详细内容，并且为您提供关于angular 中 ng-bind-html 、$scope 服务、Angular 学习系列 - - ngApp、ngBind、ngBindHtml、ngNonBindable、AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用、angularjs ng-bind-html 指令 对html标签转译的有价值信息。
本文目录一览：- ng-bind-html与bind-html-compile？
- angular 中 ng-bind-html 、$scope 服务
- Angular 学习系列 - - ngApp、ngBind、ngBindHtml、ngNonBindable
- AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用
- angularjs ng-bind-html 指令 对html标签转译
ng-bind-html与bind-html-compile？
我想知道ng-bind-html和bind-html-compile指令之间的区别。例如我给
<pcolor:red''>test<p>到ng-bind-html，这会剔除bind-html-compile所没有的样式。我可以知道何时应该使用每个指令。谢谢。
答案1
小编典典bind-html-compile 不是标准的Angular指令，它带有模块https://github.com/incuna/angular-
bind-html-compile并用于编译绑定的数据。等同于在源代码中编写html：它将重新评估，并且如果找到其他指令，它们将按预期工作。
ng-bind-html 是标准指令（与Angular捆绑在一起），仅输出html字符串 而不进行编译 。
例如，如果您的控制器具有纯html变量，例如：
$scope.dataToDisplay = ''<h1><strong>Title</strong></h1>'';然后，您可以继续使用ng-bind-html。
如果您需要使用其他指令来注入包含html的变量，例如：
$scope.dataToDisplay = ''<h1 ng-show="showIfOtherVariable"><strong>Title</strong></h1>'';那么你需要前面提到的模块。
angular 中 ng-bind-html 、$scope 服务
angularjs 最强大之处之一，数据双向绑定。项目中常用到的两个是 ng-bind 和 ng-model.
ng-bind 针对普通模块进行绑定、ng-model 针对 form 表单进型绑定。
<td>
<input type="number" class="form-control" name="mobile" ng-model="newModel.mobile" ng-maxlength="11" />
<span class="text-danger" ng-show="form.mobile.$dirty && form.mobile.$invalid">
<small class="text-danger" ng-show="form.mobile.$error.maxlength">
<i class="fa fa-exclamation-triangle"></i> 移动电话不能超过11个字符
</small>
</span>
</td><span ng-if="selectedItems.length == 0" class="selected-items">
<span ng-bind="defaultLabel"></span>
</span>
<span ng-if="selectedItems.length > 0" class="selected-items">
<span ng-repeat="selectedItem in selectedItems" class="selected-item">{{selectedItem.name}} <span class="selected-item-close"
ng-click="deselectItem(selectedItem, $event)"></span></span>
<!--<span></span>-->
</span>
Angular 学习系列 - - ngApp、ngBind、ngBindHtml、ngNonBindable
ngApp
使用这个指令自动启动一个 AngularJS 应用。ngApp 指令指定了应用程序的根节点，通常会将 ngApp 放置在网页的根节点如 <body> 或 < html > 标签的。
格式：ng-app=”value”
value：当前应用程序模块的名称。
使用代码：
<div ng-app="Demo"></div>需要注意的是：1.3 版本以前的是可以不设置值的，1.3 只后就是必需的了，而且该模块还得被定义，网上很多部分的教程是 1.3 版本之前的，所以大家在用的时候注意下版本问题。
这个指令其实他就是告诉 Angular，应用程序的根节点在我这，并且在 1.3 版本后告诉 Angular 你该执行的模块的名称是什么。
ngBind
ngBind 告诉 Angular 去用指定的表达式的值去替换指定元素内的文本内容，并且当表达式的值变化时让文本内容也跟着变化。
格式：ng-bind=”value”
value：表达式 / 值
使用代码：
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <span ng-bind="ctrl.hello"></span> <span class="ng-bind:ctrl.world"></span><br /> <span ng-bind="ctrl.hi()"></span>
</div>(function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);function testCtrl() {this.hello = "Hello";this.world = "World";this.hi = function () {return "Hi!";
};
};
}());ngBind 相对于 {{}} 形式绑定的好处就是当你快速刷新或者打开页面那瞬间，不会将绑定代码暴露；相对与 {{}} 形式来绑定的坏处就是需要载体。所以根据需求来选择用哪个也行，或者 ng-cloak 避免闪烁。
这个不用过多说明，直接就能看得出这是个绑定数据的指令。
ngBindHtml
创建一个将 innerHTML 函数所执行的结果绑定到页面指定元素的绑定方式。
格式: ng-bind-html=”value”
value: 将会被 html 转义并且绑定的字符串。
配合 $sce 使用：
.hello { width: 300px; height: 300px; background: #ccc; color: red; }<div ng-app="Demo" ng-controller="testCtrl as ctrl"><div ng-bind-html="ctrl.htmlText"></div>
</div>(function () {
angular.module("Demo", [])
.controller("testCtrl", ["$sce",testCtrl]);function testCtrl($sce) { this.htmlText = ''<div >Hello Wrold</div>'';// Error: [$sce:unsafe]Attempting to use an unsafe value in a safe context. this.htmlText = $sce.trustAsHtml(this.htmlText); // ok 能正常输出html了 };
}());引入 angular-ngSanitize.js 使用：
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <div ng-bind-html="ctrl.htmlValue"></div>
</div>(function () {
angular.module("Demo", ["ngSanitize"])
.controller("testCtrl", [testCtrl]);function testCtrl() { this.htmlText = ''<div >Hello Wrold</div>'';
};
}());ngNonBindable
这个指令告诉 Angular 不要去对当前的 Dom 元素进行编译或者绑定值。当元素的内容需要展示 Angular 指令和绑定但是又得让 Angular 忽略他的执行的时候，这个指令就有用了。比如你有个网站，需要展示代码片段的时候。
格式：ng-non-bindable
使用代码：
<span ng-bind="greeting"></span>
<span ng-bind="greeting" ng-non-bindable></span>
<span ng-non-bindable >{{greeting}}</span>
AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用
这基本上是我在阅读的内容中使用的格式：
var myApp = angular.module('myApp',[]);
function myController($scope,$sce){
$scope.myHtml = $sce.trustAsHtml($scope.sourceText);
}
HTML：
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="myController">
<textarea ng-model="sourceText"></textarea>
<div ng-bind-html="myHtml"></div>
</div>
</body>
</html>
我认为这将是直截了当的,但我一定是错的,错过了一些东西.
我把这个简单的例子放到了Plunker：http://plnkr.co/edit/ZX4dONBlzv1X8BcO1IBV?p=preview
解决方法
http://plnkr.co/edit/IZkzsuKHvbYiyV07CGqp
// would strongly suggest including sanitize in your scripts and injecting it
// into your app here to prevent "unsafe as safe" errors
var myApp = angular.module('myApp',['ngSanitize']);
myApp.controller('myController',['$scope','$sce',function myController($scope,$sce){
$scope.myHtml = "initial"; //not needed,for testing
$scope.changeText = function() {
$scope.myHtml = $sce.trustAsHtml($scope.sourceText);
}
}]);
HTML：
<head>
<script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-sanitize.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="myController">
<textarea ng-model="sourceText" ng-change="changeText()"></textarea>
<div ng-bind-html="myHtml"></div>
</div>
</body>
</html>
angularjs ng-bind-html 指令 对html标签转译
文章参考
http://www.tuicool.com/articles/2eIrIz
http://www.runoob.com/angularjs/ng-ng-bind-html.html
在工作中遇到问题：用户在后台添加一篇新闻，在数据库中存储的是HTML代码，从数据库查询出来之后结果把HTML代码显示出来。
解决办法：使用ng-bind-html 指令，能够对HTML代码的标签转译，在浏览器中显示
ng-bind-html 指令会自动过滤掉标签内的样式？
所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。
$sce干的事情来看就是将语境中存在的跨站攻击的风险给干掉.
我们返回的内容中包含一系列的html标记，它可以通过使用$sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以，我们必须在我们的控制器中引入$sce服务.
代码如下
【1】angular源码分析：angular中入境检察官$sce
【2】野兽的 Angular 学习 - -sce和sce和sceDelegate
【3】$sce官方手册
关于ng-bind-html与bind-html-compile？的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于angular 中 ng-bind-html 、$scope 服务、Angular 学习系列 - - ngApp、ngBind、ngBindHtml、ngNonBindable、AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用、angularjs ng-bind-html 指令 对html标签转译的相关知识，请在本站寻找。
本文标签：
