这个angularjs代码有什么问题?

时间:2015-05-05 08:42:08

标签: angularjs

我使用Visual Studio 2013在.cshtml文件中编写了angularjs和html代码来研究element.wrap(elements)的行为。但它没有像我预期的那样发挥作用。

@{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="exampleapp">
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<title>Directives</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script>
angular.module("exampleapp", []).directive("demoDirective", function ()
{
return function (scope, element, attrs)
{
var listElem = angular.element("<ol>");
element.append(listElem);
for(var i=0;i<scope.names.length;i++)
{
listElem.append(angular.element("<li>").append(angular.element("<span>").text(scope.names[i])));
}
var listElemClone = listElem.clone();
element.append(listElemClone);
var myarray = angular.copy(scope.names);
myarray.reverse();
var listElemx = angular.element("<ol>");
element.prepend(listElemx);
for (var j = 0; j < myarray.length; j++) {
var lixvar = angular.element("<span>").css('color', 'red').css('font-weight', 'bold').text(myarray[j]).wrap(angular.element("<li>"));
lixvar.wrap(listElemx);
}
var searchresults = listElemx.find('li');
for (var i = 0; i < searchresults.length; i++)
{
if(searchresults.eq(i).children().eq(0).text()=='Apple')
{
searchresults.eq(i).replaceWith(angular.element("<span>").css('color', 'green').css('font-weight', 'bold').text('Waruna').wrap(angular.element('<li>')));
}
}
};
}).controller("defaultctrl", function ($scope) {
$scope.names = ["Apple","Bananas","Oranges"];
});
</script>
</head>
<body ng-controller="defaultctrl">
<h3>Fruit</h3>
<div demo-directive></div>
</body>
</html>

我使用Visual Studio 2013编写此代码。这是结果的屏幕截图...... Screenshot

正如您所看到的,在使用wrap()时未创建<li></li>

实际上在工作代码<li></li>中创建了元素。这是由工作代码创建的网页的屏幕截图(使用append()除了wrap())。

Screenshot

0 个答案:

没有答案