Question

我第一次尝试使用angularjs。

我正在尝试创建一个指令，在单击时，将调用在模型的控制器函数中声明的函数。

JS：

angular.module('tasks', [])
.controller('taskCtrl', function($scope){
    $scope.complete = function(){
        console.log('parent function');
    }
})
.directive('taskList', function(){
    return {
        restrict: 'E',
        scope: {
            complete: '&'
        },
        template: '<button ng-click="complete()">Complete Task</button>',
        controller: function($scope){
            /*$scope.complete = function(){
                console.log('child function');
            }*/
        }
    }
});

HTML：

<div ng-app="tasks">
    <task-list></task-list>
</div>

我在SO上查看了其他Q / As，发现这似乎是最通用的解决方案，尽管它永远不会调用taskCtrl控制器中的complete（）函数。但是，如果取消注释，它将从指令的控制器调用complete（）函数。我错过了什么？

Answer 1

您需要编写以下html：

<div ng-controller="taskCtrl">
    <task-list complete="complete()"></task-list>
</div>

以下是更新小提琴http://jsfiddle.net/paila/vnj62xn8/4/

的链接

Answer 2

只需将您的代码更改为：

.directive('taskList', function(){
    return {
        restrict: 'E',
        scope: {
            complete: '&'
        },
        template: '<button ng-click="complete()">Complete Task</button>',
        controller: 'taskCtrl' // Here you are referencing the taskCtrl
    }
});

您只需要在控制器分配中引用现有控制器

从子指令调用模块控制器功能

2 个答案: