&gt; Is there a way to change it through css?

Yes, see [`cursor`](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor).

If you just wanted to target elements with the `ng-click` attribute, for example:

&lt;!-- language: lang-css --&gt;

    [ng-click],
    [data-ng-click],
    [x-ng-click] {
        cursor: pointer;
    }

All you have to do is use the [cursor][1] property

    &lt;div data-ng-click=&quot;myFun()&quot; class=&quot;pointer&quot;&gt;&lt;/div&gt;

    .pointer {
        cursor: pointer;
    }


  [1]: http://www.w3schools.com/cssref/pr_class_cursor.asp

Can be done via css, just add:

    .yourClass { cursor: pointer; }

To your stylesheet

If you are using datatables, you have to override the default datatables.css settings and add the following code to custom CSS, In the code below row-select is the class that I added on datatables in my HTML page.

    table.row-select.dataTable tbody td
    {
    cursor: pointer;    
    }

Yes you can achieve it simply through CSS, nothing special about AngularJS here.

    &lt;div ng-click=&quot;myAngularFunctionWithinController()&quot; style=&quot;cursor: hand;cursor: pointer;&quot;&gt;
    &lt;/div&gt; 


I have a UIScrollView (actually a UICollectionView, but that probably doesn&#39;t matter).  When it appears in IOS 7, the navigation controller sets its contentInset and contentOffset to values I don&#39;t want.  It appears to be trying to adjust for the status bar and the navigation bar.  I&#39;d greatly prefer it left them alone.  I&#39;ve fixed this by overriding the getter and setter methods for contentInset and contentOffset, with a flag to tell the object whether or not it should accept a set.  But is there a better way?

iOS 7 -- navigationController is setting the contentInset and ContentOffset of my UIScrollView

Let&#39;s say I have a Git repo with branch `A` and branch `B`.  
Branch `B` is currently checked out (i.e. `.git/HEAD` contains `refs/heads/B`).  
Now, **without checking out branch `A`**, how to view the history (log) of `path/file` in branch `A`?

Following `git help rev-parse`, I&#39;ve attempted to use `git log A:path/file`, but that doesn&#39;t seem to work (outputs nothing). Why?

How to `git log` a tree-ish from another branch?

I&#39;ve a `div` with the Angular `ng-click` directive attached to it. On hovering over this element the mouse pointer doesn&#39;t change. Is there a way to change it through CSS? I know I can simply attach an anchor tag to it, but I would like to know if this can be done.

Change the mouse pointer on ngclick

<p>I've a <code>div</code> with the Angular <code>ng-click</code> directive attached to it. On hovering over this element the mouse pointer doesn't change. Is there a way to change it through CSS? I know I can simply attach an anchor tag to it, but I would like to know if this can be done.</p>


I have a form that if a checkbox is false enforces validation on a text input using the ng-required directive.  If the checkbox is true, the field is hidden and the ng-required is set to false.

The problem is that I also have a regex for validation specified on the input as well utilizing the ng-pattern angular directive.  The issue I am running into is that if a user fills in an invalid phone number, checks the box to deactivate that input (and consequently needs no further validation) the form will not allow submission as it is invalid based on the ng-pattern.

I attempted to resolve this issue by adding an ng-change function to set the input model to null, however the ng-pattern and thus the field is still set to invalid on the initial set of the checkbox to false.  If I however uncheck the box, setting everything back to initial form load, then check the box again, the form is valid and able to submit.  I am not sure what I am missing.  Here is the ng-change code I have thus far:

        var phoneNumberRegex = /^$?(\d{3})$?[ .-]?(\d{3})[ .-]?(\d{4})$/;
        $scope.phoneNumberPattern = phoneNumberRegex;
        $scope.removeValidation = function() {
            if ($scope.cell._newUser === false) {
                $scope.request._number = &#39;&#39;;
                $scope.phoneNumberPattern = /[0-9a-zA-Z]?/;
            } else {
                $scope.phoneNumberPattern = phoneNumberRegex;
            }
        };

Angularjs dynamic ng-pattern validation

I&#39;m having trouble understanding/using the scopes for an angular UI modal. 

While not immediately apparent here, I have the modules and everything set up correctly (as far as I can tell), but these code samples in particular are where I&#39;m finding the bug.

index.html (the important part of it)

    &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn dropdown-toggle btn-mini&quot; data-toggle=&quot;dropdown&quot;&gt;
            Actions
            &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;ul class=&quot;dropdown-menu pull-right text-left&quot;&gt;
            &lt;li&gt;&lt;a ng-click=&quot;addSimpleGroup()&quot;&gt;Add Simple&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a ng-click=&quot;open()&quot;&gt;Add Custom&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a ng-click=&quot;doBulkDelete()&quot;&gt;Remove Selected&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

Controller.js (again, the important part)

    MyApp.controller(&#39;AppListCtrl&#39;, function($scope, $modal){
        $scope.name = &#39;New Name&#39;;
        $scope.groupType = &#39;New Type&#39;;

        $scope.open = function(){
            var modalInstance = $modal.open({
                templateUrl: &#39;partials/create.html&#39;,
                controller: &#39;AppCreateCtrl&#39;
            });
            modalInstance.result.then(function(response){

                // outputs an object {name: &#39;Custom Name&#39;, groupType: &#39;Custom Type&#39;}
                // despite the user entering customized values
                console.log(&#39;response&#39;, response);

                // outputs &quot;New Name&quot;, which is fine, makes sense to me.                
                console.log(&#39;name&#39;, $scope.name);

            });
        };
    });

    MyApp.controller(&#39;AppCreateCtrl&#39;, function($scope, $modalInstance){
        $scope.name = &#39;Custom Name&#39;;
        $scope.groupType = &#39;Custom Type&#39;;

        $scope.ok = function(){

            // outputs &#39;Custom Name&#39; despite user entering &quot;TEST 1&quot;
            console.log(&#39;create name&#39;, $scope.name);

            // outputs &#39;Custom Type&#39; despite user entering &quot;TEST 2&quot;
            console.log(&#39;create type&#39;, $scope.groupType);

            // outputs the $scope for AppCreateCtrl but name and groupType
            // still show as &quot;Custom Name&quot; and &quot;Custom Type&quot;
            // $scope.$id is &quot;007&quot;
            console.log(&#39;scope&#39;, $scope);

            // outputs what looks like the scope, but in this object the
            // values for name and groupType are &quot;TEST 1&quot; and &quot;TEST 2&quot; as expected.
            // this.$id is set to &quot;009&quot; so this != $scope
            console.log(&#39;this&#39;, this);
            
            // based on what modalInstance.result.then() is saying,
            // the values that are in this object are the original $scope ones
            // not the ones the user has just entered in the UI. no data binding?
            $modalInstance.close({
                name: $scope.name,
                groupType: $scope.groupType
            });
        };
    });

create.html (in its entirety)

    &lt;div class=&quot;modal-header&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;close&quot; ng-click=&quot;cancel()&quot;&gt;x&lt;/button&gt;
        &lt;h3 id=&quot;myModalLabel&quot;&gt;Add Template Group&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modal-body&quot;&gt;
        &lt;form&gt;
            &lt;fieldset&gt;
                &lt;label for=&quot;name&quot;&gt;Group Name:&lt;/label&gt;
                &lt;input type=&quot;text&quot; name=&quot;name&quot; ng-model=&quot;name&quot; /&gt;			
                &lt;label for=&quot;groupType&quot;&gt;Group Type:&lt;/label&gt;
                &lt;input type=&quot;text&quot; name=&quot;groupType&quot; ng-model=&quot;groupType&quot; /&gt;
            &lt;/fieldset&gt;
        &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button class=&quot;btn&quot; ng-click=&quot;cancel()&quot;&gt;Cancel&lt;/button&gt;
        &lt;button class=&quot;btn btn-primary&quot; ng-click=&quot;ok()&quot;&gt;Add&lt;/button&gt;
    &lt;/div&gt;

So, my question stands: why is the scope not being double-bound to the UI? and why does `this` have the customized values, but `$scope` does not?

I have tried to add `ng-controller=&quot;AppCreateCtrl&quot;` to the body div in create.html, but that threw an error: &quot;Unknown provider: $modalInstanceProvider &lt;- $modalInstance&quot; so no luck there.

At this point, my only option is to pass back an object with `this.name` and `this.groupType` instead of using `$scope`, but that feels wrong.




Scope issues with Angular UI modal

I have the following directive:

    &lt;div teamspeak details=&quot;{{data.details}}&quot;&gt;&lt;/div&gt;

this is the object structure:

    data: {
                    details: {
                        serverName: { type: &#39;text&#39;, value: &#39;my server name&#39; },
                        port: { type: &#39;number&#39;, value: &#39;my port&#39; },
                        nickname: { type: &#39;text&#39; },
                        password: { type: &#39;password&#39; },
                        channel: { type: &#39;text&#39; },
                        channelPassword: { type: &#39;password&#39; },
                        autoBookmarkAdd: { type: &#39;checkbox&#39; }
                    }
    }

and I want it to generate a link based on the data inside the `data.details` object. 
**Unfortunately it doesn&#39;t work since somehow I cann&#39;t access any inner values of the `details` object**, but if I am passing it a simple data structure like:

    &lt;div teamspeak details=&quot;{{data.details.serverName.value}}&quot;&gt;&lt;/div&gt;

I can access it by using `{{details}}`.


**Here is my Directive Code:**

    App.directive(&#39;teamspeak&#39;, function () {
        return {
            restrict: &#39;A&#39;,
            template: &quot;&lt;a href=&#39;ts3server://{{details.serverName.value}}:{{details.port.value}}&#39;&gt;Teamspeak Server&lt;/a&gt;&quot;,
            scope: {
                details: &#39;@details&#39;,
            },
            link: function (scope, element, attrs) {
            }
        };
    });

Thanks

AngularJs Passing complex data to directive

&gt; Please bear with me here. I know there are other answers such as:
&gt; https://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory

**However I still can&#39;t figure out when you&#39;d use service over factory.**

From what I can tell factory is commonly used to create &quot;common&quot; functions that can be called by multiple Controllers: https://stackoverflow.com/questions/11324202/angularjs-common-controller-functions?lq=1

The Angular docs seem to prefer factory over service. They even refer to &quot;service&quot; when they use factory which is even more confusing! http://docs.angularjs.org/guide/dev_guide.services.creating_services

**So when would one use service?**

Is there something that is only possible or much easier done with service?

Is there anything different that goes on behind the scenes? Performance/memory differences? 

  Here&#39;s an example. Other than the method of declaration, they seem identical and I can&#39;t figure out why I&#39;d do one vs the other. http://jsfiddle.net/uEpkE/ 

**Update:** From Thomas&#39; answer it seems to imply that service is for simpler logic and factory for more complex logic with private methods, so I updated the fiddle code below and it seems that both are able to support private functions?

    myApp.factory(&#39;fooFactory&#39;, function() {
        var fooVar;
        var addHi = function(foo){ fooVar = &#39;Hi &#39;+foo; }

        return {
            setFoobar: function(foo){
                addHi(foo);
            },
            getFoobar:function(){
                return fooVar;
            }
        };
    });
    myApp.service(&#39;fooService&#39;, function() {
        var fooVar;
        var addHi = function(foo){ fooVar = &#39;Hi &#39;+foo;}

        this.setFoobar = function(foo){
            addHi(foo);
        }
        this.getFoobar = function(){
            return fooVar;
        }
    });
        
    function MyCtrl($scope, fooService, fooFactory) {
        fooFactory.setFoobar(&quot;fooFactory&quot;);
        fooService.setFoobar(&quot;fooService&quot;);
        //foobars = &quot;Hi fooFactory, Hi fooService&quot;
        $scope.foobars = [
            fooFactory.getFoobar(),
            fooService.getFoobar()
        ];
    }





AngularJS : When to use service instead of factory

This is a two part question:

1. I am using the resolve property inside $stateProvider.state() to grab certain server data before loading the controller. How would I go about getting a loading animation to show during this process?

2. I have child states that also utilise the resolve property. The problem is that ui-router seems to want to finalise **all** resolves before loading *any* controller. Is there any way I can get the parent controllers to load once their resolves have been resolved, without having to wait for all the child resolves? An answer to this will likely also solve the first problem.



(Angular-ui-router) Show loading animation during resolve process

I want to use ng-click to perform multiple expressions. I want to both set a value on a model, and call a method from the `$scope`, like this:

    &lt;a ng-click=&quot;navigation.book = book &amp;&amp; bookSvc.showBook(book)&quot; href=&quot;#{{book.id}}&quot;&gt;{{book.title}}&lt;/a&gt;

Where I have `&amp;&amp;` separating the two different expressions I want to perform. I know I could just add a method that does both things in the controller. Should I just do that, or is there a way to perform two expressions directly from inside `ng-click`?

How to use ng-click with multiple expressions?

I have a click Event on a table row and in this row there is also a delete Button with a click Event. When i click the delete button the click Event on the row is also fired. 

Here is my code.

        


&lt;!-- language: lang-html --&gt;

    &lt;tbody&gt;
      &lt;tr ng-repeat=&quot;user in users&quot; class=&quot;repeat-animation&quot; ng-click=&quot;showUser(user, $index)&quot;&gt;
        &lt;td&gt;{{user.firstname}}&lt;/td&gt;
        &lt;td&gt;{{user.lastname}}&lt;/td&gt;
        &lt;td&gt;{{user.email}}&lt;/td&gt;
        &lt;td&gt;&lt;button class=&quot;btn red btn-sm&quot; ng-click=&quot;deleteUser(user.id, $index)&quot;&gt;Delete&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;



How can I prevent that the `showUser` Event is fired when i click the delete Button in the table cell?


AngularJS ng-click stopPropagation

I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker [Click here][1]. Looking at the angular documentation i can&#39;t figure out the exact way it should be done. Below is a snippet of my code. Can someone guide me in the right direction

     &lt;div ng-show=&quot;isVisible&quot; ng-class=&quot;{&#39;selected&#39;: $index==selectedIndex}&quot; class=&quot;block&quot;&gt;&lt;/div&gt;

Controller

    var app = angular.module(&quot;MyApp&quot;, []);
	app.controller(&quot;subNavController&quot;, function ($scope){

			$scope.toggle = function (){
				$scope.isVisible = ! $scope.isVisible;
			};

			$scope.isVisible = false;
		});


  [1]: http://plnkr.co/edit/YRzOYU3gIBa1OfGOBSA0?p=preview

adding and removing classes in angularJs using ng-click

I know that I can get access to the click event from `ng-click` if I pass in the `$event` object like so:

    &lt;button ng-click=&quot;myFunction($event)&quot;&gt;Give me the $event&lt;/button&gt;
    
    &lt;script&gt;
      function myFunction (event) {
        typeof event !== &quot;undefined&quot; // true
      }
    &lt;/script&gt;


It&#39;s a little bit annoying having to pass `$event` explicitly every time. Is it possible to set `ng-click` to somehow pass it to the function by default?

Automatically pass $event with ng-click?

I want to trigger `ng-click` of an element at runtime like:

    _ele.click();

OR

    _ele.trigger(&#39;click&#39;, function());

How can this be done?


Content Type	Original Author	Original Content on Stackoverflow
Question	skmvasu	View Question on Stackoverflow
Solution 1 - Angularjs	André Dion	View Answer on Stackoverflow
Solution 2 - Angularjs	Beterraba	View Answer on Stackoverflow
Solution 3 - Angularjs	Eugenio Cuevas	View Answer on Stackoverflow
Solution 4 - Angularjs	Renu	View Answer on Stackoverflow
Solution 5 - Angularjs	bdavidxyz	View Answer on Stackoverflow

Change the mouse pointer on ngclick

Angularjs Problem Overview

Angularjs Solutions

Solution 1 - Angularjs

Solution 2 - Angularjs

Solution 3 - Angularjs

Solution 4 - Angularjs

Solution 5 - Angularjs

How to `git log` a tree-ish from another branch?

iOS 7 -- navigationController is setting the contentInset and ContentOffset of my UIScrollView

Attributions