javascript - Angular 指令和 Controller 响应 ng-click 事件

Question

我正在关注 thinkster.io 上有关响应 ng-click 的指令并使用其自己的 Controller 进行响应的教程。

指令和 Controller :

angular
    .module('unifyWeb')
    .directive('kid', kid);

/* @ngInject */
function kid() {
    return {
        bindToController: true,
        controller: kidCtrl,
        controllerAs: 'vm',
        link: linkFn,
        restrict: 'E',
        scope: {
            done: '&',
        },
        template: "<input type='text' ng-model='chore'>" +
                "{{ chore }}" +
                "<div class='btn btn-success' ng-click='done({chore: chore})'>I\'m done</div>"
    };

    function linkFn(scope, element, attrs) {

    }
}

/* @ngInject */
function kidCtrl() {
    var vm = this;
    console.log("HELLO");

    vm.logChore = function(chore){
        console.log("HELLO");
        alert(chore + " is done!");
    }
}
   })

查看:

<div class='jumbotron'>
<h1>Test</h1>

 <kid done="logChore(chore)"></kid>
</div>

我不明白的是，当我单击 View (kid)中的自定义指令元素时，它应该以 vm.logChore() 进行响应。我在链接功能中遗漏了一些东西吗？我不是 100% 清楚所有这些部分如何相互作用，这就是我制作教程的原因!

我的想法:我认为这与指令的范围和链接函数的使用有关，但我不确定。

另外， View 的 Controller 是单独的，我需要在里面放一些东西吗？

View Controller :

angular
    .module('unifyWeb')
    .controller('HomepageCtrl', HomepageCtrl);

/* @ngInject */
function HomepageCtrl() {
    var vm = this;

    console.log("HELLO");
    vm.logChore = function(chore){
        console.log("HELLO " + chore);
        alert(chore + " is done!");
    }
}
})

任何帮助将不胜感激!努力掌握指令!或者让我知道我是否遗漏了重要信息，我本来可以这样做。

提前致谢!如果我弄清楚了，我会回复。

Answer 1

尝试在 ng-click 中将函数调用为“vm.logchore(chore)”。您将 vm 绑定(bind)到此，这意味着 logchore 并不直接在您的作用域上:它在 vm 上。*