Question

我正在关注thinkster.io关于响应ng-click并使用自己的控制器响应的指令的教程。

指令＆amp;控制器：

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>

我不理解的是，当我点击视图（kid）中的自定义指令元素时，它应该使用vm.logChore（）进行响应。我在链接功能中遗漏了什么吗？我不是100％清楚所有这些作品是如何相互作用的，这就是为什么我要做一个教程！

我的想法：我认为它与指令的范围和链接功能的使用有关，但我不确定。

此外，视图的控制器是独立的，我需要在那里放一些东西吗？

查看控制器：

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绑定到这个，这意味着logchore不直接在你的范围内：它在vm。*

Angular Directive和Controller响应ng-click事件

1 个答案: