angular一个关于指令的问题
这个是我写的tpl
<div class="cartRecommend" ng-controller="cartRecommController" ng-swipe-left="left($event)" ng-swipe-right="right($event)">
<div class="recommendItem" ng-repeat="x in resMenus" ng-if="x.recommend == 1">
<dl>
<dt>
<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1514999213,913480276&fm=58" alt=""/>
<div class="itemName">{{x.name}}</div>
</dt>
<dd>
<div class="itemInfo">清火凉火清热清凉清火清热清凉清火清热清凉</div>
<div class="itemPrice">12.0</div>
</dd>
</dl>
<div class="btn_plus">添加</div>
</div>
<div class="index">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
大家注意下
<div class="recommendItem">
这个元素，这个元素根据数据repet生成的。
然后是我的指令
cy.directive('cartrecommend', function() {
return {
restrict: 'E',
templateUrl: 'tpls/cart_recommend.html',
replace: true,
link: function(s, e, a, c) {
console.log(e[0].children);
console.log(e[0].children.length);
}
}
});
这是打印出来的结果
问题出现了：上面打印出来的是长度是3，下面的是1
我尝试在firefox中打开发现提示这样的警告
最后直接导致的问题是，我无法对
<div class="recommendItem">
进行dom操作，比如添加一些类名
不知道怎么解决
this lenientthis angularjs JavaScript
永远鲜红幼月
9 years, 6 months ago
Answers
你的
ng-controller="cartRecommController"
有效吗?
给指令指定控制器应该是
.directive('cartrecommend', function() {
return {
restrict: 'E',
templateUrl: 'tpls/cart_recommend.html',
replace: true,
controller: function(s, e, a, c) {
//控制器
//然后就不需要link了
}
}
});
如果需要向指令传递数据可以用scope啊 比如:
.directive('cartrecommend', function() {
return {
restrict: 'E',
templateUrl: 'tpls/cart_recommend.html',
scope: {
resMenus: '='
}
replace: true,
link: function(s, e, a, c) {
}
}
});
还有就是 我建议你把jQuery引用上 虽然angular不推荐 但现实情况是大量JQuery插件和DOM操作都需要jQuery
看得出你在开发电商类WebAPP 需要一个轮播推荐商品的模块 jQuery有很多很多这样的插件 建议你使用ui-jq把jQuery插件变成angular指令
ui-jq指令包含在
ui-utils
里
回到原题:
e[0].children.length 是 1
一直是1 你再仔细看chrome的输出 打印完div.index后 下面一行是1
至于为啥div.index下拉能显示出三个子元素 因为chrome的console输出的DOM元素是和网页上显示的绑定着的
现在是啥样console打印出来的就会变成啥样 ... 我也觉得很神奇
saber吾妻
answered 9 years, 6 months ago