javascript - distinguish scope method of custom directives angularjs -



javascript - distinguish scope method of custom directives angularjs -

so have plunker see, see utilize scope.click methods on link has ng-click function on , defined scope.click = function() {} within 'mydirective' custom directive.

the question when click link why refer sec element of custom directive why can't refer both elements? how can accomplish , how distinguish both elements within scope.click function on 'mydirective' custom directive ?

the problem is, have no isolated scope defined in directives. means hat both directives share scope controller. using directive 2 times, define scope.click event twice, overwrite scope.click of first element. additionally overwrite ng-click of <a> tag.

class="snippet-code-js lang-js prettyprint-override">var app = angular.module('myapp', []); app.controller('mainctrl', function($scope) { $scope.click = function() { console.log("inside controller"); } }); app.directive('mydirective', function() { homecoming { restrict:'ea', scope: {}, template: "<div ng-click='click()'>click me</div>", link:function(scope,elm, attr) { scope.click = function() { console.log("inside directive " + attr['id']); } } } }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myapp" ng-controller="mainctrl" ng-init="test=1;"> <a href='javascript:;' ng-click="click()">click link</a> <my-directive id="elm"> </my-directive> <my-directive id="elm2"> </my-directive> </div>

in illustration define isolated scope scope: {}. each directive has own scope. additionally define click() each scope.

update

if want execute function of directive when clicking on element outside of directive in way. however, not nice solution. think problem solve otherwise.

class="snippet-code-js lang-js prettyprint-override">var app = angular.module('myapp', []); app.controller('mainctrl', function($scope) { $scope.click = function($event) { $scope.activateelement[$event.target.id](); } $scope.activateelement = array(); }); app.directive('mydirective', function() { homecoming { restrict:'ea', link:function(scope,elm, attr) { scope.activateelement[attr['forid']] = function() { console.log("inside directive " + attr['forid']); } } } }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myapp" ng-controller="mainctrl"> <a href='javascript:;' ng-click="click($event)" id='elm'>click link</a> <!-- when click above link, run click methods under 'elm' custom directive --> <my-directive forid="elm"> </my-directive> <a href='javascript:;' ng-click="click($event)" id='elm2'>click link</a> <!-- when click above link, run click methods under 'elm2' custom directive --> <my-directive forid="elm2"> </my-directive> </div>

javascript angularjs

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize ...
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more

C++ 11 "class" keyword -

C++ 11 "class" keyword - i've started using c++ 11 little bit more , have few questions on special uses of class keyword. know it's used declare class, there's 2 instances have seen don't understand: method<class t>(); and class class_name *var; why precede typename keyword class in first example, , keyword pointer in sec example? that known elaborated type specifier , necessary when class name "shadowed" or "hidden" , need explicit. class t { }; // love of god don't t t; t t2; if compiler smart, give these warnings: main.cpp:15:5: error: must utilize 'class' tag refer type 't' in scope t t2; ^ class main.cpp:14:7: note: class 't' hidden non-type declaration of 't' here t t; ^ if class not defined, deed forwards declaration. for example: template <typename t> void method() { using type = typename t::value_type; } method...
Read more