等效于AngularJS中jQuery的wrapInner（）

debugcn 发表于 Dev

冬青

我是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>

Devqon

您可以为此创建一个指令：

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>

编辑

如果您想将所有 li元素都内包装在特定的html范围内，则可以执行以下操作：

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>");
        }
    }
}

https://jsfiddle.net/fwjuspbL/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。