AngularJS : Directive Scope Update & click event

Question

I created a plunker http://plnkr.co/edit/1kvYuxD3PpUXvB0G5W33?p=preview

i want to create a directive which can take a scope field and with add button i want to push some value in the scope field. here are the two problems

I am not able to attach event on button but able to attach event on Main directive element. I know i can use jquery's delegation but that's not the right way.
(Solved) When event is attached i am updating scope but the problem is its not updating layout untill something changed in $scope or submitted the form . (Shivkumar's comment solved the problem )

I want to make this directive reusable i.e

i want to have multiple use of this directive for different fields. My directive name is arrayfield

<div arrayfield model="employee.docs" title="Documents"></div>
<div arrayfield model="employee.docsPrimary" title="Primary Documents"></div>

Code for directive.

app.directive('arrayfield', function() {
return {
  restrict: 'EA',
  scope: {
    data: '=model',
    title: '@'
  },
  link:function link(scope, element, attrs) {
      //always gettign this emply
      console.log(element.find("#addBtn"));
     scope.$watch('data',function(){
          console.log("SOmething updated");
      });

      element.bind("click",function(){

      //If data exist push are assign new one
     (scope.data && scope.data.push({})) || (scope.data=[{}]); 
     scope.$apply(); // thanks Shivkumar for answring in comment
  });

  },

  templateUrl: 'arrayField.html'
};
});

Please let me know if you need more information.

to replicate issue i you can click on add document and then type anything in the other fields new element should be added but i want to add it as soon as i click on add document button

as you are updating scope value in jquery event so you need to apply scope.$apply(function(){ (scope.data && scope.data.push({})) || (scope.data=[{}]); }); so that your scope can update these value — Shivkumar
– Shivkumar, Commented Jun 10, 2014 at 4:59
Thanks that works fine. just need to do scope.$apply() after the data update. :) — gaurang171
– gaurang171, Commented Jun 10, 2014 at 5:08
any idea about how to make sure that event is attached only on button and not the whole div — gaurang171
– gaurang171, Commented Jun 10, 2014 at 5:09
i think you should apply directive on button not on div or as per you are code modified little bit var elem = element.find("#addBtn") elem.bind('click',function(){ }) — Shivkumar
– Shivkumar, Commented Jun 10, 2014 at 5:23
not able to attache event using element.find("#addBtn") as that is always empty jquery object. if i put some setTimeout it works but its not valid solution. for me button should be part of the directive or may be i will think of some sub directive. thanks — gaurang171
– gaurang171, Commented Jun 10, 2014 at 5:38

j.wittwer · Accepted Answer · 2014-06-10 05:57:34Z

2

You can define the function on your directive's scope,

link: function link(scope, element, attrs) {
  scope.click = function() {
    //If data exist push are assign new one
    (scope.data && scope.data.push({})) || (scope.data = [{}]);
  };

and then attach it to the button using ng-click in the template:

<button ng-click="click()" type="button" class="addBtn" id="addBtn">Add {{title}}</button>

Notice, there is no need for scope.$apply. Here is an update of your plunker: http://plnkr.co/edit/yeWQwz7yHnTZmaipu3Vx?p=preview

answered Jun 10, 2014 at 5:57

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gaurang171 Over a year ago

This is exactly what i wanted. it made my understanding clear about scope inheritance. earlier i tried to use ng-click and it was looking for $scope's method but at that time i didnt have method for scope under directive. thank you very much.

Collectives™ on Stack Overflow

AngularJS : Directive Scope Update & click event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related