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 领域”的一部分。

有人可以在澄清上述内容的同时帮助我理解角度领域吗？任何有关改进上述代码的反馈也将不胜感激。

4

1 回答 1

4

正如@DavinTyron 所说，按钮单击事件是外部事件，而不是“Angular 领域”的一部分。因此，您需要调用$scope.$apply()以触发摘要循环并更新 DOM。

但是，在您的情况下，您不需要手动绑定 click 事件。您可以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 回答