使用 Jquery 操作 html 字符串(在所见即所得编辑器的 Angular 应用程序中)
Manipulate html string with Jquery ( in Angular application for wysiwyg editor )
我有一个所见即所得的编辑器,它使用 $scope.variable 作为 HTML.
的来源
现在我需要将 div 插入 HTML 字符串的某些部分。所以我可以以编程方式附加、前置、删除等部分所见即所得的显示内容。但我无法让操纵工作。
插入东西到dom应该很简单吧?但在此示例中没有附加任何内容:
JAVASCRIPT:
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.obj = {};
// html string
$scope.obj.htmlString = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>';
// element inserted into html string ( virtual dom )
$($scope.obj.htmlString).find('.container').prepend('<b>text inserted into container div</b>');
// insert the elements to dom
angular.element('.insert-here').prepend($scope.obj.htmlString);
});
HTML:
<body ng-app="app" ng-controller="ctrl">
{{ obj.htmlString }}
<div class="insert-here">
</div>
</body>
笨蛋:
您需要使用 .container 选择器并从 DOM
中获取 html
var htmlString = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>';
// element inserted into html string ( virtual dom )
var $html = $('<div>' + htmlString + '</div>').find('.container').prepend('<b>text inserted into container div</b>');
htmlString = $html.html();
alert(htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
您可以使用模块ngSanitize to get the directive ngBindHtml to accomplish this. You should not have to manipulate the DOM directly when using Angular. Check out “Thinking in AngularJS” if I have a jQuery background?
var app = angular.module("app", ['ngSanitize']);
app.controller("ctrl", function($scope) {
$scope.insertHere = "<b>text inserted into container div</b>"
});
<div class="insert-here" ng-bind-html="insertHere"></div>
var app = angular.module("app", ['ngSanitize']);
app.controller("ctrl", function($scope) {
$scope.insertHere = "<b>text inserted into container div</b>"
});
/* Styles go here */
.insert-here{
border: 2px solid red;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
{{ obj.htmlString }}
<div class="wrapper-div">wrapper div
<div class="container">container div
<div class="inner-div">inner div</div>
</div>
</div>
<div class="insert-here" ng-bind-html="insertHere">
</div>
</body>
我有一个所见即所得的编辑器,它使用 $scope.variable 作为 HTML.
的来源现在我需要将 div 插入 HTML 字符串的某些部分。所以我可以以编程方式附加、前置、删除等部分所见即所得的显示内容。但我无法让操纵工作。
插入东西到dom应该很简单吧?但在此示例中没有附加任何内容:
JAVASCRIPT:
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.obj = {};
// html string
$scope.obj.htmlString = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>';
// element inserted into html string ( virtual dom )
$($scope.obj.htmlString).find('.container').prepend('<b>text inserted into container div</b>');
// insert the elements to dom
angular.element('.insert-here').prepend($scope.obj.htmlString);
});
HTML:
<body ng-app="app" ng-controller="ctrl">
{{ obj.htmlString }}
<div class="insert-here">
</div>
</body>
笨蛋:
您需要使用 .container 选择器并从 DOM
中获取 htmlvar htmlString = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>';
// element inserted into html string ( virtual dom )
var $html = $('<div>' + htmlString + '</div>').find('.container').prepend('<b>text inserted into container div</b>');
htmlString = $html.html();
alert(htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
您可以使用模块ngSanitize to get the directive ngBindHtml to accomplish this. You should not have to manipulate the DOM directly when using Angular. Check out “Thinking in AngularJS” if I have a jQuery background?
var app = angular.module("app", ['ngSanitize']);
app.controller("ctrl", function($scope) {
$scope.insertHere = "<b>text inserted into container div</b>"
});
<div class="insert-here" ng-bind-html="insertHere"></div>
var app = angular.module("app", ['ngSanitize']);
app.controller("ctrl", function($scope) {
$scope.insertHere = "<b>text inserted into container div</b>"
});
/* Styles go here */
.insert-here{
border: 2px solid red;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
{{ obj.htmlString }}
<div class="wrapper-div">wrapper div
<div class="container">container div
<div class="inner-div">inner div</div>
</div>
</div>
<div class="insert-here" ng-bind-html="insertHere">
</div>
</body>