Angularjs指令鏈接調用函數ng-click

Question

我的指令工作正常，但我想在ng-click中使用它但是，鏈接內的函數不能被觸發。

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

我想調用的函數NG點擊請看這一個http://jsfiddle.net/ovzyro1f/2/從div ng-repeat="item in items" class="wrap"

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

Answer 1

刪除同胞您應該避免像我們在jQuery中那樣操縱DOM。

在Angular中，我們有不同的想法：它是在數據更改時自動轉換DOM的數據（https://docs.angularjs.org/guide/databinding）。大多數情況下，您不必手動進行更改。

這樣做，您通常不需要使用鏈接功能。你可以有一個控制器（例如你的例子）或者帶有控制器的指令（https://docs.angularjs.org/guide/directive）。

最後我剛剛修改了一下你的控制器和你的模板。

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

}