Question

我正在尝试创建自定义元素指令：

<quest-card quest="quest"></quest-card>

该指令的模板是：

<div class="col-md-6 card">
<h4>{{ quest.title }}</h4>

<p>{{ quest.description }}</p>
<hr/>
<a class="btn btn-primary pull-right" href="#">I did it</a>

我想要做的是将点击功能绑定到＆＃34; a＆＃34;调用另一个控制器中的方法的卡内的元素，为此我定义了这样的指令：

app.directive("questCard", function () {
    return {
        restrict: "E",
        scope: {
            quest: "="
        },
        templateUrl: "templates/quest-card.htm",
        require: "^questFeed",
        link: function (scope, element, attrs, questFeedCtrl) {
            console.log(element.children().length);
        }
    }
});

在链接函数element.children（）。length返回0，我也尝试使用element.find选择a元素（＆＃34; a＆＃34;）但是也返回0. html模板显示那个锚标签在div里面，所以我猜它应该可以工作。

这是我第一次尝试角度小项目，所以我可能做错了。

Answer 1

感谢charlietfl：

在指令的模板中：

<a class="btn btn-primary pull-right" href="#" ng-click="completeQuest()">I did it</a>

指令：

app.directive("questCard", function () {
    return {
        restrict: "E",
        scope: {
            quest: "=",
            active: "="
        },
        templateUrl: "templates/quest-card.htm",
        require: "^questFeed",
        link: function (scope, element, attrs, questFeedCtrl) {
            scope.completeQuest = function () {
                questFeedCtrl.completeQuest();
            }
        },
        controllerAs: "cardCtrl"
    }
});

将事件绑定到指令内容中的项而不是指令元素本身

1 个答案: