Angularjs Direktive Link Call-Funktion in NG-Klick

Question

Meine Anweisung funktioniert gut, aber ich möchte es in ng-click verwenden, aber die Funktion innerhalb Link kann nicht ausgelöst werden.

http://jsfiddle.net/ovzyro1f/

<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'); 
     } 
    }, 
    } 
}); 

Ich möchte die Funktion in anrufen ng Klick sehen Sie bitte dieses http://jsfiddle.net/ovzyro1f/2/ sib entfernen div ng-repeat="item in items" class="wrap"

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

Answer 1

Sie sollte vermeiden, das DOM wie in jQuery zu manipulieren.

In Angular denken wir anders: Es sind die Daten, die das DOM automatisch transformiert, wenn sich die Daten ändern (https://docs.angularjs.org/guide/databinding). Meistens müssen Sie die Änderungen nie manuell vornehmen.

Dabei müssen Sie in der Regel nicht die Link-Funktion verwenden. Sie können einen Controller (wie in Ihrem Beispiel) oder eine Direktive mit einem Controller (https://docs.angularjs.org/guide/directive) haben.

Endlich habe ich nur ein bisschen Ihren Controller und Ihre Vorlage geändert.

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; 
    } 

}