如何在被angular js指令替换之前获取原始标记?这个问题已被提出,但我发布这个问题,因为解决方案对我不起作用,而且我想知道角度js团队是否可能为此引入了任何新方法。
这是我到目前为止所尝试的:
function $block($compile) {
var html = '<div>new content</div>';
return {
restrict: 'E',
template: function(element, attrs) {
console.log(element); // still getting the new element
return html;
},
link: function(scope, element, attrs) {
console.log(element)
}
};
}
angular.module('directive', [])
.directive('myDirective', $block);
如何获取旧模板,然后将其替换为新模板?
答案 0 :(得分:1)
当您console.log
某个对象时,浏览器会在查看时显示内容值。不是在它被记录的时候。这就是开发者控制台的工作方式。
如果您记录innerHTML
,您会发现它们不同:
angular.module('directive', [])
.directive('myDirective', $block);
function $block($compile) {
var html = '<div>new content</div>';
return {
restrict: 'E',
template: function(element, attrs) {
console.log(element[0].innerHTML);
return html;
},
link: function(scope, element, attrs) {
console.log(element[0].innerHTML);
}
};
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app=directive>
<h1>Directive Demo</h1>
<my-directive><div>Old Content</div>
</my-directive>
</body>
答案 1 :(得分:0)
angular.module('directive', [])
.directive('myDirective', function(){
return {
restrict: 'A',
template: '<div>new content</div>',
link: function(scope, element, attrs) {
},
compile:function(scope,element){
console.log(element.$$element[0].outerHTML)
}
};
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<body ng-app="directive">
<div style="background-color:red;" my-directive>Hello</div>
</body>
</html>
&#13;