Get scope element outside directive

Question

Is there a trick to getting an element associated with an area outside the directive that owns it?

I believe that this should be done in the least favorable conditions (from the console or Greasemonkey script). For instance. to get an item with an area

angular.element(document.querySelector('.ng-scope')).scope().$$childTail 

without moving the DOM.

I think that it is possible to go around all the ng-scope and ng-isolate-scope DOM elements and display their areas, but I'm looking for a more elegant solution (the map should also be updated, and I'm trying to stay away from DOMSubtreeModified , also this will not work with debugInfoEnabled disabled).

Answer 1

Scopes (src) do not contain a reference to the element with which they are associated. After all, areas can exist without being tied to a specific element.

$ compile (src) is the one responsible for combining elements with areas.

Part of the compilation process complements the element, allowing you to move from region → region (for example, angular.element("#something").scope() ). The same does not happen with regions.

So, to go to another scope → element, you need to display the objects of the scope: Get the DOM element by the scope of $ id . Does this feature in Angular JS Batarang allow you to select an item from a page and check its associated areas? Here's how to do it. Batarang uses angular-hint. angular -hint iterates through all the elements on the page with the ng-scope class and returns the one that has the corresponding scope identifier (src: function findElt ) .

 function findElt (scopeId) { var elts = document.querySelectorAll('.ng-scope'); var elt, scope; for (var i = 0; i < elts.length; i++) { elt = angular.element(elts[i]); scope = elt.scope(); if (scope.$id === scopeId) { return elt; } } } 

Answer 2

There are several things you can do to get a directive element.

Event item

If you need to pass an element in an event, you can create a callback that can pass an element back. If you don’t need a link to it all the time, this is the preferred method.

In the return object in the directive add something like

  scope:{ elementclicked: "&" } 

In the template of your directive you can add

  <....... ng-click="ElementClicked(event)"........> 

In your directive controller, you can now process the click and pass the results

 $scope.ElementClicked = function ($event) { if ($scope.elementclicked != undefined) { elementclicked({ event: $event }); } } 

Now you pass your callback, like any other, to the directive.

  <yourDirective elementclicked="MyFunction(event)" ....> 

Element on connection

If you need a link at creation time, you can also do this. If you go to a data structure, such as settings, you can set it in a binding event. When you contact the directive, just set the element.

 scope:{ settings:"=" }, link:function(scope,element){ scope.$watch('settings',function(){ if(scope.settings!=undefined){ scope.settings.element=element; } } } 

This will keep track of when the settings are bound and set the item property. The big drawback is that you add the property to the passed object, but if it is intended for a directive inside the directive or if it is just your project, this should be good.

Another way to do this is to use the first method and create an elementlinked (element) callback and run it after binding the area.

Answer 3

As I understand it, you want to access the value of the area outside the directive. I made a small piece, check it out:

HTML part:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script data-require=" angular.js@1.3.x " src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script> <div id="outer" ng-app="plunker" ng-controller="MainCtrl"> You are {{msg}} </div> <div onclick="change()">click me</div> 

Fragment of a fragment:

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, $rootScope) { $scope.msg = "great"; $rootScope.safeApply = function( fn ) { var phase = this.$root.$$phase; if(phase == '$apply' || phase == '$digest') { if(fn) { fn(); } } else { this.$apply(fn); } }; }); 

// Custom java script

 function change() { var scope = angular.element($("#outer")).scope(); scope.safeApply(function(){ scope.msg = 'Superhero'; }) } 

For the above working code, Plunker Link is here: Plunker