我是AngularJS的新手，当我尝试以角度方式做所有事情时，我需要用<li>包裹所有<span>个元素。其中许多<li>个元素都会从不同的http个请求中收到。因此，我需要使用<li>动态包装所有<span>元素。
<li><span class="item-content">Lorem Ipsum</span></li>
我知道我可以通过使用jQuery .wrapInner()来实现这一目标。但AngularJS有可能吗？ AngularJS可以搜索DOM并更新这样的内容吗？如何在AngularJS中使用jQuery？
继@devqon回答后，我添加了此代码段。
将所有li元素包装在特定的html范围
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
$scope.test = "controller is working if you can see this";
});
app.directive("wrapInner", function () {
return {
restrict: "A",
link: function(scope, element) {
// Note that this will only fire once, and won't work with dynamically added li elements
element.find("li").wrapInner('<span class="item-content"></span>');
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<body ng-app="app" ng-controller="mainController">
{{test}}
<ul wrapp-inner>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque vitae, recusandae, error expedita ea voluptatem!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur est esse quos dolorem amet quam, nisi sed voluptatem unde! Fuga iusto labore, porro nemo, nam quo dolore ullam atque quidem.</li>
</ul>
</body>
在您的应用中包装所有li元素
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
$scope.test = "controller is working if you can see this";
});
// By naming the directive 'li' and restrict to 'E' (element), angular will
// apply it to all <li> elements
app.directive("li", function () {
return {
restrict: "E",
link: function(scope, element) {
element.wrapInner('<span class="item-content"></span>');
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<body ng-app="app" ng-controller="mainController">
{{test}}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque vitae, recusandae, error expedita ea voluptatem!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur est esse quos dolorem amet quam, nisi sed voluptatem unde! Fuga iusto labore, porro nemo, nam quo dolore ullam atque quidem.</li>
</ul>
</body>
答案 0 :(得分：1)
您可以为此创建一个指令：
app.directive("wrapInner", function () {
return {
restrict: "A",
link: function(scope, element) {
element.wrapInner("<span></span>");
}
}
}
并像这样使用它：
<li wrap-inner>Lorem Ipsum</li>
这将导致以下html：
<li><span>Lorem Ipsum</span></li>
修改
如果你想在特定的html范围内包装所有 li元素，你可以这样做：
app.directive("wrapInner", function () {
return {
restrict: "A",
link: function(scope, element) {
// Note that this will only fire once, and won't work with dynamically added li elements
element.find("li").wrapInner("<span></span>");
}
}
}
然后像这样使用它：
<div wrapp-inner>
<!-- a lot of li's -->
</div>
https://jsfiddle.net/fwjuspbL/1/
或者，如果您想在应用程序中包含所有 li元素，只需为li编写指令：
// By naming the directive 'li' and restrict to 'E' (element), angular will
// apply it to all <li> elements
app.directive("li", function () {
return {
restrict: "E",
link: function(scope, element) {
element.wrapInner("<span></span>");
}
}
}