Angularjs directive link call function in ng-click

Question

My directive works fine, but I'd like to use it in ng-click However, the function inside link can't be triggered.

<div ng-app="editer" ng-controller="myCtrl" class="container">
  <div class="parents">
    <div ng-repeat="item in items" class="wrap" sibs>
      <span>{{item.name}}</span>
      <button ng-click="">click</button>
    </div>
  </div>
</div>

JS

function myCtrl($scope) {
  $scope.editedItem = null;

  $scope.items = [{
    name: "item #1",
    thing: "thing 1"
  }, {
    name: "item #2",
    thing: "thing 2"
  }, {
    name: "item #3",
    thing: "thing 3"
  }];

  $scope.show = false; //ignore this line

}

var editer = angular.module('editer', []);

editer.directive('sibs', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        element.parent().children().addClass('unclicked');
        element.removeClass('unclicked');
      })

      scope.myClick = function() {
        element.parent().children().addClass('unclicked');
        element.removeClass('unclicked');
      }
    },
  }
});

I'd like to call the function in ng-click please see this one http://jsfiddle.net/ovzyro1f/2/ to remove sib from div ng-repeat="item in items" class="wrap"

 <button ng-click="myClick()">click</button>

It works for me. I edited your JSFilddle: jsfiddle.net/ovzyro1f/1 — GG.
– GG., Commented Apr 16, 2016 at 1:05
Yes, it is working but I'd like to call the function in ng-click please see this one jsfiddle.net/ovzyro1f/2 to remove sib from div ng-repeat="item in items" class="wrap" thanks — olo
– olo, Commented Apr 16, 2016 at 1:07
I am trying to call the function in ng-click, if I only write a function like $scope.myClick = function()... it doesn't work. so I had to use directive? I am new — olo
– olo, Commented Apr 16, 2016 at 1:11

GG. · Accepted Answer · 2016-04-16 01:30:22Z

1

You should avoid to manipulate the DOM like we do in jQuery.

In Angular we think differently: it's the data which transforms automatically the DOM when the data changes (https://docs.angularjs.org/guide/databinding). Most of the time you never have to make the changes manually.

In doing so, you generally don't need to use the link function. You can have a controller (like in your example) or a directive with a controller (https://docs.angularjs.org/guide/directive).

Finally I just modified a little bit your controller and your template.

HTML

<div ng-app="editer" ng-controller="myCtrl" class="container">
  <div class="parents">
    <div ng-repeat="item in items" class="wrap" sibs>
      <span ng-class="{ unclicked: !item.selected }">{{ item.name }}</span>
      <button ng-click="selectItem(item)">click</button>
    </div>
  </div>
</div>

JS

function myCtrl($scope) {

  $scope.items = [...];

  $scope.selectItem = function (item) {

      // reset all the items
      $scope.items.forEach(function (i) {
          i.selected = false;
      });

      // set the new selected item
      item.selected = true;
  }

}

edited Apr 16, 2016 at 1:30

answered Apr 16, 2016 at 1:16

GG.

22k14 gold badges93 silver badges133 bronze badges

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

2 Comments

olo Over a year ago

thanks I know I can do this way, I am trying to traverse all siblings, I have tried this way.

GG. Over a year ago

I edited my answer with some explanations. Hope it will help you. :)

Collectives™ on Stack Overflow

Angularjs directive link call function in ng-click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related