ng-click doesn't take parameters from the DOM

Question

I have the following code:

<input id="id">
<button data-action="bea" ng-click="Create($('#id1')[0].value);" class="btn">Insert ID</button>
<button data-action="bea" ng-click="Create($('#id2')[0].value);" class="btn">Insert ID</button>

In the JS I have:

$scope.Create = function (id){
        if (id === undefined) {
            $scope.data = "You must specify an id";
        } else {
                $scope.data = data;
                console.log(data);
            });
        }
    };

When the call gets into the Create function the value of the id is undefined.

If I add the following line at the beginging of the Create function everything works ok:

id = $('#id')[0].value;

If I send a constant value it works:

<button data-action="bea" ng-click="Create('SomeID');" class="btn">Insert ID</button>

Why is this happening and how can I do that without putting the line of value into the method?

Thanks

Answer 1

This is just an extension of comments and other answers, You could achieve this in many ways using angular, one simple example could be:-

  <!-- Add a controller -->
  <div ng-controller="MainCtrl"> 
     <!-- Give a model binding to your text input -->
     <input ng-model="userEntry" type="text"/> 
     <!-- ng-click pass which ever argument you need to pass, provided it is an expression that can be evaluated against the scope or any constants -->
     <button data-action="bea" ng-click="Create(userEntry);" class="btn">Insert ID</button>
    <!-- Some simple data binding using interpolation -->
    {{data}}
     <!-- Just for demo on repeater on a list of items on the scope -->
     <div ng-repeat="item in items track by $index">{{item}}</div>
  </div>

Example Demo

My 2 cents on the lines of what were originally trying to do:-

Use angular bindings instead of accessing DOM directly for getting the data, it really helps you deal with just the data without worrying about how to access or render it in DOM. If you think you need to access DOM for implementing business logic re-think on the design, if you really need to do it, do it in a directive. Angular is very opinionated on the design and when where you do DOM access.

• ng-model
• ng-binding
• controller
• all about ngmodel controller

Answer 2

My guess is that $ is not bound to the jQuery function when the ng-click value is evaluated, because it is not exposed in the Angular scope.

Solutions to adress this:

• expose the jQuery function in scope somewhere, e.g $scope.$ = $; in a controller.
• make the Create function parameterless as you suggested, with a var id = $('#id')[0].value; at the beginning
• my favorite : avoid using jQuery. If you put some data in the #id element, there's probably a more natural and AngularJS-idiomatic way of retrieving it than querying the DOM (e.g an Angular service).

In particular, if the element you're targeting is an <input> element, then use the ngModel directive to link the value to a $scopeproperty that will be accessible in the controller :

<input ng-model="inputData"/>

Answer 3

This is not the way you should do in AngularJS. You should really think in Angular if you want to use AngularJS. Refer this post ("Thinking in AngularJS" if I have a jQuery background?)

All DOM manipulation should be done in Directive. Refer this page that I found really clear. (http://ng-learn.org/2014/01/Dom-Manipulations/)

Answer 4

The JavaScript you are trying to pass as a parameter of the create function is not available in the scope of the Create function.

Try to target the element a different way.

Does that help?