1

我创建了以下指令：

app = angular.module('sapp', [])
.config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
}]);

app.directive("word", function() {
    return {
        restrict: "E",
        scope: {
            remove : "&",
            word_id : "=",
            keyword : "=",

        },
        template: '<div>[[keyword]] - [[word_id]]' +
            '<i class="icon-remove" ng-click="remove({word_id:word_id})"></i></div>'
    };
});

app.controller("WordListCtrl", function($scope){
    $scope.wordlist = JSON.parse('{{wordlist|safe}}');
    //The above just loads a dictionary as {1 : 'apple', 2: 'boy'}
    $scope.removeWord = function(word_id){
        console.log("Removing", word_id);
    };
});

使用此指令的 html 代码是：

<word ng-repeat="(word_id, keyword) in wordlist" word_id="word_id" keyword="keyword" remove="removeWord(word_id)"></word>

检查代码：http: //jsfiddle.net/YPgBt/10/ 我在这里遵循教程：http ://www.egghead.io/video/mZGgNPTHc2Q 我使用它编写了代码。

即使我对关键字和 word_id 给予完全相同的处理。当我执行“[[keyword]] - [[word_id]]”时，word_id 永远不会打印在模板中，word_id 始终为空白。

我正在遍历字典而不是普通列表。当我单击 icon-remove 元素时，控制台会打印“Removing undefined”。在做了随机的事情之后，我看到了一个非常奇怪的行为，如果我在我的指令中更改 ng-click 使得任何键或值都是关键字.. 那就是... ng-click="remove({word_id: keyword})" 或 ng-click="remove({keyword:word_id})" 或 ng-click="remove({keyword:whatever})" .. 它给了我想要的输出，这意味着控制台打印“Removing 1 "

我在这里做错了什么？我对AngularJS很陌生，如果我犯了一个幼稚的错误，请原谅。

4

1 回答 1

0

在指令的模板中，您只需传入word_id函数remove()，

<i class="icon-remove" ng-click="remove(word_id)"></i>

在控制器中，您可以删除带有delete关键字的条目

$scope.removeWord = function (word_id) {
    delete $scope.wordlist[word_id];
    console.log("Removing", word_id);
};

Demo

于 2013-08-15T21:07:06.590 回答