我正试图从我的Angular.js应用程序中删除jquery以使其更轻,并改为使用Angular的jqLite.但该应用程序大量使用find('#id')和find('.classname'),jqLite不支持,只有'标签名称'(根据文档)
想知道你认为改变它的最佳方法是什么.我想到的一种方法是创建自定义HTML标记.例如:改变
<span class="btn btn-large" id="add-to-bag">Add to bag</span>
至
<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>
和
$element.find('#add-to-bag')
至
$element.find('a2b')
有什么想法吗？其他想法？
谢谢
利奥尔
你如何获得元素属性值？
例如HTML元素:
<button data-id="345" ng-click="doStuff($element.target)">Button</button>
JS:
function doStuff(item){
angular.element(item)[0].data('id'); // undefined is not a function
}
任何建议非常感谢,JSFIDDLE演示在这里:http://jsfiddle.net/h3TFy/
我一直在寻找一个简单但不是微不足道的问题的答案:onload用jqLite在Angular中捕获图像' 事件的正确方法是什么？我发现了这个问题,但我想要一些指令解决方案.
正如我所说,我不接受这个:
.controller("MyCtrl", function($scope){
// ...
img.onload = function () {
// ...
}
因为它在控制器中,而不是在指令中.
是否有更简洁的方法迭代一组jqlite元素而不是以下？
var els = angular.element(document.getElementById("main").children); // just as an example
for(var i=0, el; el=els[i]; i++) {
// do something
}
我的意思是,这没有任何问题,我很惊讶没有each()或forEach().我在互联网上找不到任何相关信息.
如何检查Angular指令中的DOM中是否已存在具有特定ID的元素？通过使用angular.element()一个元素创建如果不存在,例如angular.element('someID')一个人是否已经存在与否将返回一个元素.
我现在正在做的解决方法是使用这样的.html()jqLite函数:
if(angular.element('#someElementID').html()){
console.log('仅在元素已存在的情况下触发');
}
有一个更好的方法吗？我想避免为此包含整个jQuery.
编辑:"这不能在Angular UI Modals中完成"是一个有效的答案,如果实际情况如此.
这是我从触摸事件中获得的返回数据.显然缺少任何有用的触摸X/Y坐标(https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches).这是一个毫无希望的通用问题,但是,任何想法？传递给触摸时执行的函数的"event"对象:
{
"originalEvent": {
"isTrusted": true
},
"type": "touchstart",
"timeStamp": 1450388006795,
"jQuery203026962137850932777": true,
"which": 0,
"view": "$WINDOW",
"target": {},
"shiftKey": false,
"metaKey": false,
"eventPhase": 3,
"currentTarget": {},
"ctrlKey": false,
"cancelable": true,
"bubbles": true,
"altKey": false,
"delegateTarget": {},
"handleObj": {
"type": "touchstart",
"origType": "touchstart",
"data": null,
"guid": 2026,
"namespace": ""
},
"data": null
}
现在,这是在画布中的角度UI模式,但鼠标事件工作正常.这是我的元素btw:
link: function(scope, element, attrs, model){
//scope.canvasElem = element[0].children[0].children[0];
scope.canvasElem = angular.element($('.touchScreen'))[0];
scope.ctx = scope.canvasElem.getContext('2d');
这是我如何绑定的一个例子:
element.bind('touchstart', scope.touchStart);
编辑,这是一个用于比较的mousedown事件对象:
{
"originalEvent": { …运行此测试时,我不断收到错误 Expected undefined to be true.
it('should have the right classes', function() {
// this doesnt work
expect(element.find('.exampleClass').hasClass('ng-hide')).toBe(true);
// but this works
expect(element.find('span').hasClass('ng-hide')).toBe(true);
});
如何使用jqlite通过找到一个元素id,并class？
我最近一直在努力理解为什么.addClass函数不能在jqLite上运行
element.addClass('active')
Element返回一个html元素数组,一遍又一遍地测试,以确保.我可以隐藏(),show(),添加.css或获取一个,甚至设置.attr,但addClass抵制我.
edit:element是svg块中的路径,这就是使addClass函数无关紧要的原因,仍然试图修复它.
element是一个jqLite对象
谢谢.
在这个例子中,我有一个附加指令的输入.该指令用于显示输入旁边的消息.还有另一个输入和一个添加消息的按钮.显示某些消息后,使用附加指令关注输入应清除消息. http://jsfiddle.net/viro/WBqxf/
所以我有一个带有隔离模型的指令,我正在尝试在具有指令的元素成为焦点时更新模型.好像我必须在事件范围内包装事件回调.$ apply如果我想更新模型:
element.on('focus',function(){
scope.$apply(function(){
console.log("focus !");
scope.tstMsg=[];
})
});
我想我必须将它包装在$ apply中,因为我正在使用jqlite事件回调,我猜它们在"外部"angularJS中运行,但我没有在文档中明确说明它.
我做得对吗还是黑客攻击？
有没有更好的方法呢？
I have looked at multiple threads and tried a vast variety of solutions. Quite frankly I think I am losing my mind.
I have an ng-repeat with inputs. All that needs to happen is that when the user presses enter, it should shift focus to the next input, basically simulating the tab key functionality.
The code (incomplete): HTML:
<body ng-app="ap" ng-controller="con">
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat='person in persons'>
<td>
<input type='text'
name="personName"
ng-model="person.name"
/>
</td>
<td>
<input type='number' …