1

リストから値を削除できるようにするディレクティブを作成しようとしていました。HTML および Javascript コードは次のとおりです。

HTML

<body ng-app="evalModule">
    <div ng-controller="Ctrl1">
        <input type="text" ng-model="newFriend"></input>
        <button ng-click="addFriend()">Add Friend</button>
        <ul>
            <li ng-repeat="friend in friends">
                <div class='deletable' index-value = {{$index}} delete-function="removeFriend(frndToRemove)"> {{$index}} {{friend}} </div>
            </li>
        </ul>
    </div>
</body>

Javascript

function Ctrl1 ($scope) {
    $scope.friends = ["Jack","Jill","Tom"];

    $scope.addFriend = function () {
        $scope.friends.push($scope.newFriend);
    }

    $scope.removeFriend = function (indexvalue) {
        console.log(indexvalue);
        var index = $scope.friends.indexOf(indexvalue);
        $scope.friends.splice(indexvalue, 1);
    }
}

var evalModule = angular.module("evalModule",[]);

evalModule.directive('deletable', function(){
    return{
        restrict : 'C',
        replace : true,
        transclude : true,
        scope:{
            indexValue : '@indexValue',
            deleteFunction : '&'
        },
        template : '<div>'+
                        '<div> X </div>'+
                        '<div ng-transclude></div>'+
                    '</div>',
        link:function(scope, element, attrs){
            var del = angular.element(element.children()[0]);
            del.bind('click',deleteValue);

            function deleteValue () {
                var expressionHandler = scope.deleteFunction;
                expressionHandler({frndToRemove : scope.indexValue});
                console.log("deleteValue called with index" + attrs.indexValue);
                scope.$apply();
            }
        }
    }
});

JSFiddle へのリンク

コードがイベントとしてボタン クリック イベントにバインドされているにもかかわらず、scope.$apply を呼び出す必要があるのはなぜですか。http://docs.angularjs.org/guide/scopeのドキュメントによると、これは「Angular realm」の一部である必要があります。

上記を明確にしながら、誰かが角度領域を理解するのを手伝ってくれますか? 上記のコードの改善に関するフィードバックもお待ちしております。

4

1 に答える 1

4

@DavinTyronが言ったように、ボタンクリックイベントは外部イベントであり、「角度領域」の一部ではありません。$scope.$apply()したがって、ダイジェスト サイクルをトリガーして DOM を更新するには、を呼び出す必要があります。

ただし、あなたの場合、クリック イベントを手動でバインドする必要はありません。ng-click代わりに次を使用できます。

template: '<div>'+
          '<div ng-click="delete()"> X </div>'+
          '<div ng-transclude></div>'+
          '</div>',
link: function(scope) {
    scope.delete = function () {
        scope.deleteFunction({frndToRemove : scope.indexValue});
        console.log("deleteValue called with index" + attrs.indexValue);                
    };
}

は使用されているためng-click、呼び出す必要はありません$scope.$apply()。jsFiddleの修正版を次に示します。

于 2013-08-19T16:46:57.040 に答える