Essentially, and as-noted by @kevin-b:

    // find(&#39;#id&#39;)
    angular.element(document.querySelector(&#39;#id&#39;))

    //find(&#39;.classname&#39;), assumes you already have the starting elem to search from
    angular.element(elem.querySelector(&#39;.classname&#39;))

**Note:** If you&#39;re looking to do this from your controllers you may want to have a look at the &quot;Using Controllers Correctly&quot; section in the [developers guide][1] and refactor your presentation logic into appropriate directives (such as &amp;lt;a2b ...&amp;gt;).


  [1]: http://docs.angularjs.org/guide/controller &quot;developers guide&quot;

angualr uses the lighter version of jquery called as jqlite which means it doesnt have all the features of jQuery. here is a reference in angularjs docs about what you can use from jquery. 
[Angular Element docs][1]


  [1]: https://docs.angularjs.org/api/ng/function/angular.element

In your case you need to find a div with ID or class name. 
for class name you can use
    

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;



    var elems =$element.find(&#39;div&#39;) //returns all the div&#39;s in the $elements
        angular.forEach(elems,function(v,k)){
        if(angular.element(v).hasClass(&#39;class-name&#39;)){
         console.log(angular.element(v));
    }}

or you can use much simpler way by query selector


    angular.element(document.querySelector(&#39;#id&#39;))
    
    angular.element(elem.querySelector(&#39;.classname&#39;))

it is not as flexible as jQuery but what 


If `elem.find()` is not working for you, check that you are including JQuery script **before** angular script....

I&#39;m trying to learn android development and I am initially confused by the different project structures between Eclipse and Android Studio. This makes it difficult to follow tutorials designed for Eclipse. Could anyone let me know why these differences exist? Should they exist?

For instance, if I were to locate the R.java file in the two different IDEs, the paths would look like this:

**Eclipse:** app\gen\com.example.app\R.java


**Android Studio:** app\build\source\r\debug\com.example.app\R.java

Why are these paths different? Why is my R.java located in a  debug folder in Android Studio? This lead to some errors early on, and if anyone has any insight into these differences I would appreciate them. 


  [1]: http://i.stack.imgur.com/UWNBd.png
  [2]: http://i.stack.imgur.com/ImT4m.png

Android Studio Project Structure (v.s. Eclipse Project Structure)

I have the following 
    
    data.AppendFormat(&quot;{0},&quot;,dataToAppend);

The problem with this is that I am using it in a loop and there will be a trailing comma. What is the best way to remove the trailing comma?

Do I have to change data to a string and then substring it?

Best way to remove the last character from a string built with stringbuilder

I&#39;m trying to remove jquery from my Angular.js app in order to make it lighter, and put Angular&#39;s jqLite instead. But the app makes heavy use of find(&#39;#id&#39;) and find (&#39;.classname&#39;), which are not supported by jqLite, only &#39;tag names&#39; (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  
     `&lt;span class=&quot;btn btn-large&quot; id=&quot;add-to-bag&quot;&gt;Add to bag&lt;/span&gt;`

to  
     

    &lt;a2b style=&quot;display:none;&quot;&gt;&lt;span class=&quot;btn btn-large&quot; &gt;Add to bag&lt;/span&gt;&lt;/a2b&gt;

and 

    $element.find(&#39;#add-to-bag&#39;) 
to

    $element.find(&#39;a2b&#39;)
 

Any thoughts? other ideas?

thanks

Lior

How to select an element by classname using jqLite?

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 
<code>&#x3C;span class="btn btn-large" id="add-to-bag">Add to bag&#x3C;/span></code>
to
<pre><code class="hljs language-php-template">&#x3C;a2b style="display:none;">&#x3C;span class="btn btn-large" >Add to bag&#x3C;/span>&#x3C;/a2b>
</code></pre>
and
<pre><code class="hljs language-bash">$element.find('#add-to-bag') 
</code></pre>
to
<pre><code class="hljs language-bash">$element.find('a2b')
</code></pre>
Any thoughts? other ideas?
thanks
Lior

I&#39;m trying to get a quick nav to work correctly. It&#39;s floating on the side. When they click on  a link, it takes them to that ID on the page. I&#39;m following this [guide from Treehouse][1].
This is what I have for the scrolling:

    $(&quot;#quickNav a&quot;).click(function(){
        var quickNavId = $(this).attr(&quot;href&quot;);
        $(&quot;html, body&quot;).animate({scrollTop: $(location).offset().top}, &quot;slow&quot;);
        return false;
    });

I initially placed it before the `&lt;/body&gt;`. But I seem to be running into a race condition where that was firing before the quickNav compiled (it has a `ng-hide` placed on it, not sure if that&#39;s causing it - but it is within the DOM).

If I run that block of code in the console, then the scrolling works as expected. 

I figured it&#39;d be more effective to move this into the controller - or more likely within a directive. But I&#39;m not having luck accomplishing that. **How can I get this block of code to work with AngularJS?**

  [1]: http://blog.teamtreehouse.com/smooth-scrolling-in-jquery-quick-tip

ScrollTo function in AngularJS

Using AngularJS with Scala Play, I&#39;m getting this error.

&gt; Error: Argument &#39;MainCtrl&#39; is not a function, got undefined

I&#39;m trying to create a table consisting of the days of the week.

Please take a look at my code. I had checked the name of the Controller, but that seems correct. Note: Code used from this SO [answer][1]

**index.scala.html**

    @(message: String)
    
    @main(&quot;inTime&quot;) {
    
    &lt;!doctype html&gt;
    &lt;html lang=&quot;en&quot; ng-app&gt;
    	&lt;head&gt;
    		&lt;link rel=&quot;stylesheet&quot; media=&quot;screen&quot; href=&quot;@routes.Assets.at(&quot;stylesheets/main.css&quot;)&quot;&gt;
    	&lt;/head&gt;
    &lt;div ng-controller=&quot;MainCtrl&quot;&gt;
        &lt;table border=&quot;1&quot;&gt;
        &lt;tbody ng-repeat=&#39;(what,items) in data&#39;&gt;
          &lt;tr ng-repeat=&#39;item in items&#39;&gt;
            &lt;td ngm-if=&quot;$first&quot; rowspan=&quot;{{items.length}}&quot;&gt;{{what}}&lt;/td&gt;
            &lt;td&gt;{{item}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;/html&gt;	
    }

**MainCtrl.js** 

    (function() {
        angular.module(&#39;[myApp]&#39;, []).controller(&#39;MainCtrl&#39;, function($scope) {
            $scope.data = {
                Colors: [&quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;]
            }
        });
    }());


  [1]: https://stackoverflow.com/questions/11367769/creating-tables-with-angular-js

Error: Argument is not a function, got undefined

I have some text like this:

    &lt;span&gt;My text&lt;/span&gt;

I want to display without tags:

    My text

I also don&#39;t want to apply the tags, I want to strip them. What&#39;s an easy way to do that?

Angular html:

    &lt;div&gt;{{myText | htmlToPlaintext}}&lt;/div&gt;

angularjs to output plain text instead of html

I&#39;ve been using AngularJS for a little while now, and have found the need to use [$timeout][1] every once in a while (Seems to usually be to init a jQuery plugin).

Recently, I&#39;ve been trying to get a better and more in-depth understanding of the digest cycle, and I came across [$evalAsync][2] function.

It seems like that function produces similar results to `$timeout`, only you don&#39;t give it delay. Every time I&#39;ve used `$timeout` it has been with a delay of 0, so now I&#39;m wondering if I should have used `$evalAsync` instead.

Are there any fundamental differences between the two? What cases would you use one over the other? I&#39;d like to get a better feeling of when to use which one.


  [1]: http://docs.angularjs.org/api/ng.$timeout
  [2]: http://docs.angularjs.org/api/ng.$rootScope.Scope#$evalAsync

What&#39;s the difference between $evalAsync and $timeout in AngularJS?

I&#39;ve seen the documentation of the Angular select directive here: http://docs.angularjs.org/api/ng.directive:select. 
I can&#39;t figure how to set the default value. This is confusing: 

&gt; select as label for value in array

Here is the object:

    {
        &quot;type&quot;: &quot;select&quot;, 
        &quot;name&quot;: &quot;Service&quot;,
        &quot;value&quot;: &quot;Service 3&quot;, 
        &quot;values&quot;: [ &quot;Service 1&quot;, &quot;Service 2&quot;, &quot;Service 3&quot;, &quot;Service 4&quot;] 
    }

The html (working): 

    &lt;select&gt;&lt;option ng-repeat=&quot;value in prop.values&quot;&gt;{{value}}&lt;/option&gt;&lt;/select&gt;

and then I&#39;m trying to add an ng-option attribute inside the select element to set `prop.value` as the default option (not working).

    ng-options=&quot;(prop.value) for v in prop.values&quot;

What am i doing wrong?

how to use ng-option to set default value of select element

What is a good way to unit test isolated scope in AngularJS

[JSFiddle showing unit test][1]

Directive snippet

        scope: {name: &#39;=myGreet&#39;},
        link: function (scope, element, attrs) {
            //show the initial state
            greet(element, scope[attrs.myGreet]);
            
            //listen for changes in the model
            scope.$watch(attrs.myGreet, function (name) {
                greet(element, name);
            });
        }

I want to ensure the directive is listening for changes - this does **not** work with an isolated scope:

        it(&#39;should watch for changes in the model&#39;, function () {
            var elm;
            //arrange
            spyOn(scope, &#39;$watch&#39;);
            //act
            elm = compile(validHTML)(scope);
            //assert
            expect(scope.$watch.callCount).toBe(1);
            expect(scope.$watch).toHaveBeenCalledWith(&#39;name&#39;, jasmine.any(Function));
        });

**UPDATE:**
I got it to work by checking if the expected watchers were added to the child scope, but it&#39;s very brittle and probably using the accessors in an undocumented way (aka subject to change without notice!).

    //this is super brittle, is there a better way!?
    elm = compile(validHTML)(scope);
    expect(elm.scope().$$watchers[0].exp).toBe(&#39;name&#39;);

**UPDATE 2:**
As I mentioned this is brittle! The idea still works but in newer versions of AngularJS the accessor has changed from `scope()` to `isolateScope()`:

    //this is STILL super brittle, is there a better way!?
    elm = compile(validHTML)(scope);                       
    expect(elm.isolateScope().$$watchers[0].exp).toBe(&#39;name&#39;);

  [1]: http://jsfiddle.net/daniellmb/b7BRR

How to Unit Test Isolated Scope Directive in AngularJS

[Plunker Link][1]

I have a element which I would like to bind html to it.

`&lt;div ng-bind-html=&quot;details&quot; upper&gt;&lt;/div&gt;`

That works. Now, along with it I also have a directive which is bound to the bound html: 

`$scope.details = &#39;Success! &lt;a href=&quot;#/details/12&quot; upper&gt;details&lt;/a&gt;&#39;`

But the directive `upper` with the div and anchor do not evaluate. How do I make it work?


  [1]: http://plnkr.co/edit/EZuKFBrE94bujWpcNat2?p=preview

angular ng-bind-html and directive within it

I want to catch the enter key press event on the textbox below. To make it more clear I am using a `ng-repeat` to populate the tbody. Here is the HTML: 
  
  

    &lt;td&gt;&lt;input type=&quot;number&quot; id=&quot;closeqty{{$index}}&quot; class=&quot;pagination-right closefield&quot; 
        data-ng-model=&quot;closeqtymodel&quot; data-ng-change=&quot;change($index)&quot; required placeholder=&quot;{{item.closeMeasure}}&quot; /&gt;&lt;/td&gt;


This is my module:

    angular.module(&#39;components&#39;, [&#39;ngResource&#39;]);

I am using a resource to populate the table and my controller code is:

    function Ajaxy($scope, $resource) {
    //controller which has resource to populate the table 
    }



How to use a keypress event in AngularJS?

In our app we have several layers of nested directives. I&#39;m trying to write some unit tests for the top level directives. I&#39;ve mocked in stuff that the directive itself needs, but now I&#39;m running into errors from the lower level directives. In my unit tests for the top level directive, I don&#39;t want to have to worry about what is going on in the lower level directives. I just want to mock the lower level directive and basically have it do nothing so I can be testing the top level directive in isolation.

I tried overwriting the directive definition by doing something like this:

	angular.module(&quot;myModule&quot;).directive(&quot;myLowerLevelDirective&quot;, function() {
		return {
			link: function(scope, element, attrs) {
				//do nothing
			}
		}
	});
However, this does not overwrite it, it just runs this in addition to the real directive. How can I stop these lower level directives from doing anything in my unit test for the top level directive?

How do you mock directives to enable unit testing of higher level directive?

I want to create a directive that links to an attribute. The attribute specifies the function that should be called on the scope. But I also want to pass an argument to the function that is determined inside the link function.

&lt;!-- language: lang-html --&gt;

    &lt;div my-method=&#39;theMethodToBeCalled&#39;&gt;&lt;/div&gt;

In the link function I bind to a jQuery event, which passes an argument I need to pass to the function:

&lt;!-- language: lang-js --&gt;

    app.directive(&quot;myMethod&quot;,function($parse) {
      restrict:&#39;A&#39;,
      link:function(scope,element,attrs) {
         var expressionHandler = $parse(attrs.myMethod);
         $(element).on(&#39;theEvent&#39;,function( e, rowid ) {
            id = // some function called to determine id based on rowid
            scope.$apply(function() {expressionHandler(id);});
         }
      }
    }

    app.controller(&quot;myController&quot;,function($scope) {
       $scope.theMethodToBeCalled = function(id) { alert(id); };
    }

Without passing the id I can get it working, but as soon as I try to pass an argument, the function is not called anymore

Content Type	Original Author	Original Content on Stackoverflow
Question	Lior	View Question on Stackoverflow
Solution 1 - Angularjs	psema4	View Answer on Stackoverflow
Solution 2 - Angularjs	hannad rehman	View Answer on Stackoverflow
Solution 3 - Angularjs	ancajic	View Answer on Stackoverflow

How to select an element by classname using jqLite?

Angularjs Problem Overview

Angularjs Solutions

Solution 1 - Angularjs

Solution 2 - Angularjs

Solution 3 - Angularjs

Best way to remove the last character from a string built with stringbuilder

Android Studio Project Structure (v.s. Eclipse Project Structure)

Attributions