<html ng-app="app">
<body ng-controller="appCtrl">
<div ng-controller="myCtrl">
<div class="my-select">
<select ng-model="selected" ng-options="member.name for member in members">
<option value="">Please select ...</option>
</select>
<div>options: {{options}}</div>
<div>
length of options: <span class="num"></span>
</div>
<div>selected: {{selected.name}}</div>
</div>
</div>
</body>
</html>
var app = angular.module('app', ['ui.bootstrap']);
app.controller('appCtrl', function($scope, $timeout) {
});
app.controller('myCtrl', function($scope, $http, $timeout) {
// $http.get('data.json').success(function(data) {
// $scope.members = data.members;
// });
$scope.members = [
{
"name": "Lily",
"sex": "F",
"nickname": "li"
},{
"name": "Tom",
"sex": "M",
"nickname": ""
},{
"name": "Joe",
"sex": "F",
"nickname": ""
},{
"name": "Mirajan",
"sex": "F",
"nickname": "Mira"
},{
"name": "Jerimmy",
"sex": "M",
"nickname": "Jeri"
}
]
});
app.directive('mySelect', function($timeout) {
return {
restrict: 'AC',
link: function(scope, element, attrs) {
scope.options = element.find('option');
options = element.find('option');
$timeout(function() {
// element.wrap('<div class="members"></div>');
element.append('<div class="members"></div>');
var members = angular.element(document.querySelector('.members'));
for(var i=1;i<options.length;i++) {
members.append('<li>' + options.eq(i).attr('label')+'</li>');
}
//-----------------------------------------//
members.find('li').wrapAll('<ul></ul>');
//-----------------------------------------//
},100);
$timeout(function() {
angular.element(document.querySelector('.num')).text(options.length);
},100);
}
}
});为什么 members.find('li').wrapAll('<ul></ul>'); 无效呢？
plunker 请戳这里
的确 angular.element 不支持 wrapAll 方法，以下是我在网上找到的 angular.element 的支持方法，可供参考。
addClass() - 为每个匹配的元素添加指定的样式类名after() - 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append() - 在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选clone() - 创建一个匹配的元素集合的深度拷贝副本contents() - 获得匹配元素集合中每个元素的子元素，包括文字和注释节点css() - 获取匹配元素集合中的第一个元素的样式属性的值data() - 在匹配元素上存储任意相关数据detach() - 从DOM中去掉所有匹配的元素empty() - 从DOM中移除集合中匹配元素的所有子节点eq() - 减少匹配元素的集合为指定的索引的哪一个元素find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代hasClass() - 确定任何一个匹配元素是否有被分配给定的（样式）类html() - 获取集合中第一个匹配元素的HTML内容next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素on() - 在选定的元素上绑定一个或多个事件处理函数off() - 移除一个事件处理函数one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器prepend() - 将参数内容插入到每个匹配元素的前面（元素内部）prop() - 获取匹配的元素集中第一个元素的属性（property）值ready() - 当DOM准备就绪时，指定一个函数来执行remove() - 将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）removeAttr() - 为匹配的元素集合中的每个元素中移除一个属性（attribute）removeClass() - 移除集合中每个匹配元素上一个，多个或全部样式removeData() - 在元素上移除绑定的数据replaceWith() -`用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合text() - 得到匹配元素集合中每个元素的合并文本，包括他们的后代toggleClass() - 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类triggerHandler() - 为一个事件执行附加到元素的所有处理程序unbind() - 从元素上删除一个以前附加事件处理程序val() - 获取匹配的元素集合中第一个元素的当前值wrap() - 在每个匹配的元素外层包上一个html元素
你的项目如果没有加载Jquery的话，angular.element()生成的是angular的jqlite元素，应该是不支持wrapAll这个方法的。