0

Angular でカスタム チェックボックス ディレクティブを作成しようとしていますが、それができました。しかし問題は、ビルドインがng-click呼び出されないことです。カスタム ディレクティブを削除すると、ng-clickうまく機能します。私はそれを理解するための知識がまだ不足しているスコープと関係があると思います。誰でも私を助けてください。

コードはhttp://jsfiddle.net/bingjie2680/UzM2c/2/です。

<div ng-app="components">
    <div ng-controller="MainCtrl">
        <input type="checkbox" ng-model="p.checked" />
         <div checkbox="p.checked" ng-click="test()">test</div>
         {{p.checked}}
    </div>
</div>

js:

function MainCtrl($scope){ 
    $scope.p = {checked: false,  name:'test'};
    $scope.$watch('p', function(){

    }, true);

    $scope.test = function(){
        alert('test');
    }
}

angular.module('components', []).
directive('checkbox', function () {
return {
    link : function (scope, ele, attr){
        ele.bind('click', function(){
            ele.toggleClass('active');
            scope.$apply(function(){
                scope.value = ele.hasClass('active');
            });
        });

        scope.$watch('value', function(newv, oldv){
            newv ? ele.addClass('active') : ele.removeClass('active');
        });
    },
    scope : {
        value: '=checkbox'
    }
}
});
4

2 に答える 2

8

@Yahya の回答は機能し$parentますが、HTML 構造が変更された場合に破損する可能性がある を使用する代わりに (つまり、HTML の変更によりスコープの継承方法が変更される可能性があります)、代わりに、ディレクティブに呼び出すメソッド/コールバックを HTML 属性で指定する必要があります。要素がクリックされたとき:

<div checkbox="p.checked" cb="test()">test</div>

次に、ディレクティブで：

ele.bind('click', function(){
   ele.toggleClass('active');
   scope.cb();               // calls test()
   scope.$apply(function(){
     scope.value = ele.hasClass('active');
   });
});
...        
scope : {
   value: '=checkbox',
   cb: '&',
}

フィドル

于 2013-04-11T15:13:08.137 に答える