ng-bind-html和ng-控制器
ng-bind-html和ng-控制器
提问于 2015-09-29 16:19:03
我将不安全的html注入到某些<div>中，如下所示：
<div class="category-wrapper" ng-bind-html="content"></div>这个html有angularjs“代码”($scope.content装载了类似的内容)：
<script type='text/javascript' src='giveus.js'></script>
<div class="giveus-wrapper" ng-controller="GiveUsController">{{variable1}}</div>注意，这个片段有ng-controller。GiveUsController与嵌入的html同时被延迟加载(而不是在头中)。声明此控制器没有错误，因为它已经过测试。
我的控制器就像：
angular.module("tf").controller('GiveUsController', function ($scope, $http)
{
console.debug("GiveUsController loaded");
$scope.variable1 = "hi!";
}没有控制台调试或variable1分配。
看起来没有控制器绑定到那个<div>。
我不知道我怎么能给html注入角度控制器并让它工作.
有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-09-29 16:26:03
您可以使用一些手动的html编译来做您想做的事情。这里有一种方法，本质上是$compile服务的指令包装器。注意下面的例子和用法..。
<div class="category-wrapper" ng-html="content"></div>.controller('ctrl', function($scope) {
$scope.content = '<div class="giveus-wrapper" ng-controller="GiveUsController">{{variable1}}</div>'
})
.controller('GiveUsController', function($scope) {
console.log('hello from GiveUsController')
$scope.variable1 = 'I am variable 1'
})
.directive('ngHtml', ['$compile', function ($compile) {
return function (scope, elem, attrs) {
if (attrs.ngHtml) {
elem.html(scope.$eval(attrs.ngHtml));
$compile(elem.contents())(scope);
}
scope.$watch(attrs.ngHtml, function (newValue, oldValue) {
if (newValue && newValue !== oldValue) {
elem.html(newValue);
$compile(elem.contents())(scope);
}
});
};
}]);JSFiddle链路 -演示
Stack Overflow用户
发布于 2015-09-29 16:38:43
本身不绑定添加到DOM中的ng指令。
$sce.compile或 $compile 帮助从角度上读取哪些元素被添加到实际的DOM中，为了使用$compile，还必须使用指令。
应该是这样的：
var m = angular.module(...);
m.directive('directiveName', function factory(injectables) {
return = {
priority: 0,
template: '<div></div>', // or // function(tElement, tAttrs) { ... },
transclude: false,
restrict: 'A',
templateNamespace: 'html',
scope: false,
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
controllerAs: 'stringIdentifier',
bindToController: false,
require: 'siblingDirectiveName', 'optionalDirectiveName', '?^optionalParent'],
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
},
};
});以及你想去的地方
$compileProvider.directive('compile', function($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};Stack Overflow用户
发布于 2015-09-29 16:26:13
您必须编译HTML内容，我使用一个指令获得了这个结果：
.directive('comunBindHtml', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
}])希望它有帮助:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32849029
复制相关文章
相似问题
腾讯云开发者
