jqlite

Binding click event to child element inside directive of AngularJS

自闭症网瘾萝莉.ら 提交于 2019-12-24 15:59:06
问题 I have following directive. (function () { 'use strict'; angular.module('ap.App') .directive('clearCancelFinishButtonsHtml', function () { return { scope: { clearFunction: '=' }, replace: true, templateUrl: 'directives/clearCancelFinishButtons.html', link: function (scope, el, attrs) { var clear= angular.element(el.find('button.clear')); console.log(el.find('.clear')); clear.bind("click", function () { alert("here"); }); } } }); })(); and it is pointing to the html file as follows <div class=

Trigger click event on an AngularJS directive in Mocha test suite

假装没事ソ 提交于 2019-12-19 03:19:33
问题 I have a regular angular app with a directive. This directive contains an element with a ng-click="clickFunction()" call. All works well when I click that element. I now need to write a test for this click, making sure that this function was actually run when the element was clicked - this is what I'm having trouble with. Here's a jsfiddle to illustrate my issue: http://jsfiddle.net/miphe/v0ged3vb/ The controller contains a function clickFunction() which should be called on click. The unit

jQuery or jqlite not working with elements inside <ng-view></ng-view>

感情迁移 提交于 2019-12-11 23:14:08
问题 index.html: <div> <p class="aaa">ppp</p> <ng-view> </ng-view> </div> general.html <p class="bbb">pppppp</p> javascript var app = angular.module('StarterApp', ['ngMaterial','ngRoute','ngImgCrop']); app.config(function($routeProvider){ $routeProvider .when('/general', { templateUrl:'../view/general.html' }) }); $(document).ready(function() { $(".aaa").on("click",function(){ alert('clicked'); }); $(".bbb").on("click",function(){ alert('clicked'); }); }); It works for the element with class="aaa"

How to test if event.target.hasClass() using angularJS and jqlite?

牧云@^-^@ 提交于 2019-12-10 13:57:13
问题 After a click pass the event to ctrl. I want to write a conditional that will return true if the element.target has the class modal-click-shield Question: How can I use .hasClass() with event.target using angulars' jqlite ? Problem: Currently I'm getting a type error saying that: $scope.exitModal = function(event){ // Return to current page when exiting the modal, via UI. // After state return, should set focus on the matching link. var target = event.target; console.log(target.hasClass(

angularJS element.on callback and scope.$apply

你离开我真会死。 提交于 2019-12-07 03:44:55
问题 In this example, I have an input with an attached directive. The directive is meant to display messages next to the input. There's another input and a button to add messages. Once some messages are displayed, focusing on the input with the attached directive should clear the messages. http://jsfiddle.net/viro/WBqxf/ So I have a directive with an isolated model, and I'm trying to update the model when the element which has the directive goes into focus. It seems like I have to wrap event

Trigger click event on an AngularJS directive in Mocha test suite

偶尔善良 提交于 2019-11-30 21:04:08
I have a regular angular app with a directive. This directive contains an element with a ng-click="clickFunction()" call. All works well when I click that element. I now need to write a test for this click, making sure that this function was actually run when the element was clicked - this is what I'm having trouble with. Here's a jsfiddle to illustrate my issue: http://jsfiddle.net/miphe/v0ged3vb/ The controller contains a function clickFunction() which should be called on click. The unit test should imitate a click on the directive's element and thus trigger the call to that function. The

AngularJS - get element attributes values

倖福魔咒の 提交于 2019-11-27 17:26:45
How do you get an element attribute value? e.g. HTML element: <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 } Any suggestions much appreciated, JSFIDDLE demo here: http://jsfiddle.net/h3TFy/ Since you are sending the target element to your function, you could do this to get the id: function doStuff(item){ var id = item.attributes['data-id'].value; // 345 } the .data() method is from jQuery . If you want to use this method you need to include the jQuery library and access

AngularJS - get element attributes values

本小妞迷上赌 提交于 2019-11-26 19:01:50
问题 How do you get an element attribute value? e.g. HTML element: <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 } Any suggestions much appreciated, JSFIDDLE demo here:http://jsfiddle.net/h3TFy/ 回答1: Since you are sending the target element to your function, you could do this to get the id: function doStuff(item){ var id = item.attributes['data-id'].value; // 345 } 回答2: the

How to select an element by classname using jqLite?

家住魔仙堡 提交于 2019-11-26 14:59:49
I'm trying to remove jquery from my Angular.js app in order to make it lighter, and put Angular's jqLite instead. But the app makes heavy use of find('#id') and find ('.classname'), which are not supported by jqLite, only 'tag names' (as per documentation) wondered what do u feel would be the best approach to change it. One approach I thought about is to create custom HTML tags. for example: change <span class="btn btn-large" id="add-to-bag">Add to bag</span> to <a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b> and $element.find('#add-to-bag') to $element.find(

AngularJS - Image “onload” event

橙三吉。 提交于 2019-11-26 06:01:29
问题 I\'ve been searching for an answer to simple but not trivial question: What is a right way to catch image\' onload event in Angular only with jqLite? I found this question , but I want some solution with directives. So as I said, this is not accepted for me: .controller(\"MyCtrl\", function($scope){ // ... img.onload = function () { // ... } because it is in controller, not in directive. 回答1: Here's a re-usable directive in the style of angular's inbuilt event handling directives: angular