angular ng show/ng hide无法正确使用ng bind html
angular ng-show / ng-hide not working correctly with ng-bind-html
我想在html字符串中为我的元素设置ng show或ng hide,并将其传递给带有ng bind html的视图,但ng show/ng hide不起作用,我的元素始终可见。
这是我的控制器代码:
$scope.my = {
messageTrue: true,
messageFalse: false
};
$scope.HtmlContent = "<div ng-show='{{my.messageFalse}}'>This is incorrect (ng-show & my.messageFalse={{my.messageFalse}})</div> ";
$scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);
这是我的视图代码:
<div ng-show="my.messageTrue">This is correct (ng-show & my.messageTrue={{my.messageTrue}})</div>
<div ng-hide="my.messageFalse">This is correct (ng-hide & my.messageFalse={{my.messageFalse}})</div>
<div ng-bind-html="trustedHtml"></div>
这是我问题的答案。(感谢Xaero)
抱歉我英语不好。感谢
这是因为您正在注入的html尚未通过angular编译和链接,所以它只是"按原样"显示。如果你根本不包括angular.js,它的处理方式与你的标记的处理方式相同。
解决方案是创建一个类似于ng-bind-html的指令,但其中也包括编译和链接html片段的步骤。
此链接就是此类指令的一个示例。
这是代码:
angular.module('ngHtmlCompile', []).
directive('ngHtmlCompile', function($compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) {
element.html(newValue);
$compile(element.contents())(scope);
});
}
}
});
以及用法。
<div ng-html-compile="trustedHtml"></div>
这是正在工作的Plunk
您是否在控制器中注入$interpole,并在模块中添加ngSanitize?
这是一个工作plnkr:http://plnkr.co/edit/qTsUzi04tCNdK5BAZvDa?p=preview
// controller.js
var app = angular.module('app');
app.controller('indexController', indexController);
function indexController($scope, $interpolate) {
$scope.my = {
messageTrue: true,
messageFalse: false
};
$scope.HtmlContent = "<div ng-show='{{my.messageTrue}}'>{{my.messageTrue}}</div> ";
$scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);
}
// app.js
angular.module('app', ['ngSanitize']);
// index.html
<!DOCTYPE html>
<html>
<head></head>
<body ng-app="app" ng-controller="indexController">
<div ng-show="my.messageTrue">{{my.messageTrue}}</div>
<div ng-show="my.messageFalse">{{1 + 1}}</div>
<div ng-bind-html="trustedHtml"></div>
<script data-require="angular.js@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-sanitize.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
</body>
</html>
关于使用ng-bind-html的链接:如何通过AngularJS模板输出html?
$scope.my = { message: false };
$scope.HtmlContent = "<div ng-show='{{my.message}}'>{{my.message}}</div> ";
$scope.trustedHtml = $interpolate($scope.HtmlContent)($scope);
你应该试试这个:
<div ng-show="my.message == false">{{my.message}}</div>
<div ng-bind-html="trustedHtml"></div>
相关文章:
- 显示&作为&在jsp中使用angularjs而不使用ng-bind-html
- Angular 1.4解析ng-bind-html的内容
- ng-bind-html 工作,但抛出错误
- AngularJS: ng-bind-html remove styling
- 为什么我的指令是't使用ng-bind-html指令
- 在Angular中,在类中使用ng-bind
- ng-bind-html在点击锚标记或ng-click之前不显示
- AngularJS:如何将视图中指定的模型(ng-bind)绑定到通过API可用的$资源
- angular ng show/ng hide无法正确使用ng bind html
- ng-bind-html中的angular命令
- Angular 和 django 无法加载 ng-bind
- 如何使用$scope和ng-bind在AngularJS中检索文本框条目
- Angular ng-bind-html - 阻止执行JS代码
- ng-bind 在 AngularJs 中的 ng-dialog 上不起作用
- ng-repeat / ng-bind 不会显示我的数据
- 如何使ng-bind-html编译angularjs代码
- Angularjs 和 ng-bind-html 无法正常工作
- ng-bind 用作文本区域的指令,但不是输入标签
- Angularjs selectbox 在使用 ng-bind-html 时不反映底层 ng-model
- Exting & > AngularJs 中 ng-bind 中的字符