Javascript AngularJS：将函数传递给指令

通过将函数传递给指令，我遇到了一个问题（这篇文章很熟悉：但我无法让它工作）

这是我的密码：

指令：

.directive('testdirective', function(){
  return{
    restrict: 'E',
    scope: {
      onClick: '&'
    },
    controller: 'TestController',
    controllerAs: 'tc',
    bindToController: true,
    template: '<div><button ng-click="onClick()">What UP</button></div>',
    replace: true
  }
})

HTML:

我想要的听起来很简单，我只想将函数传递给指令，并通过点击按钮执行它

对我来说，我的代码看起来一模一样 但我的不起作用：/

如果有人能给我一些提示，那就太棒了

编辑

我的指令需要他自己的控制器

稍后要传入的函数将来自另一个控制器

---

小提琴和你的代码不一样

您已将指令的控制器设置为“TestController”。我想你想做的是：

.directive('testdirective', function(){
    return{
        restrict: 'E',
        scope: {
            onClick: '&'
        },
        template: '<div><button ng-click="onClick()">What UP</button></div>',
        replace: true
    }
});

.directive（'testdirective'，function（）{
返回{
限制：'E'，
范围：{
onClick:“&”
},
模板：'怎么了'，
替换：正确
}
});

在HTML中

<div ng-controller="TestController">
  <testdirective on-click="testFunction()"></testdirective>
</div>

编辑：根据OP的评论

app.directive('testdirective', function(){
        return{
            restrict: 'E',
            scope: {
                onClick: '&'
            },
            template: '<div><button ng-click="tc.onClick()">What UP</button></div>',
            replace: true,
            controller: 'TestController',
            controllerAs: 'tc',
            bindToController: true
        }
    });

    app.controller('TestController', function ($scope) {
        console.log($scope);
    }) ;

    app.controller('AnotherController', function ($scope) {
        $scope.testFunction = function(){
            alert("I´m the alert of the TestContoller");
        };

        $scope.test = 'test';
    });

app.directive（'testdirective'，function（）{
返回{
限制：'E'，
范围：{
onClick:“&”
},
模板：'怎么了'，
替换：正确，
控制器：“TestController”，
控制器：“tc”，
bindToController:true
}
});
app.controller（'TestController'，函数（$scope）{
console.log（$scope）；
}) ;
app.controller（'AnotherController'，函数（$scope）{
$scope.testFunction=function（）{
警报（“我是testcontroller的警报”）；
};
$scope.test='test'；
});

还有，你的HTML

<div ng-controller="AnotherController">
    <testdirective on-click="testFunction()"></testdirective>
</div>

---

您正在将指令告知bindToController。因此，在指令的模板中，onClick绑定到控制器，而不是范围。因此，您可以通过控制器访问onclick，作为指令模板中的

tc.onclick（）

。

小提琴与代码不同

您已将指令的控制器设置为“TestController”。我想你想做的是：

.directive('testdirective', function(){
    return{
        restrict: 'E',
        scope: {
            onClick: '&'
        },
        template: '<div><button ng-click="onClick()">What UP</button></div>',
        replace: true
    }
});

.directive（'testdirective'，function（）{
返回{
限制：'E'，
范围：{
onClick:“&”
},
模板：'怎么了'，
替换：正确
}
});

在HTML中

<div ng-controller="TestController">
  <testdirective on-click="testFunction()"></testdirective>
</div>

编辑：根据OP的评论

app.directive('testdirective', function(){
        return{
            restrict: 'E',
            scope: {
                onClick: '&'
            },
            template: '<div><button ng-click="tc.onClick()">What UP</button></div>',
            replace: true,
            controller: 'TestController',
            controllerAs: 'tc',
            bindToController: true
        }
    });

    app.controller('TestController', function ($scope) {
        console.log($scope);
    }) ;

    app.controller('AnotherController', function ($scope) {
        $scope.testFunction = function(){
            alert("I´m the alert of the TestContoller");
        };

        $scope.test = 'test';
    });

app.directive（'testdirective'，function（）{
返回{
限制：'E'，
范围：{
onClick:“&”
},
模板：'怎么了'，
替换：正确，
控制器：“TestController”，
控制器：“tc”，
bindToController:true
}
});
app.controller（'TestController'，函数（$scope）{
console.log（$scope）；
}) ;
app.controller（'AnotherController'，函数（$scope）{
$scope.testFunction=function（）{
警报（“我是testcontroller的警报”）；
};
$scope.test='test'；
});

还有，你的HTML

<div ng-controller="AnotherController">
    <testdirective on-click="testFunction()"></testdirective>
</div>

---

您正在将指令告知bindToController。因此，在指令的模板中，onClick绑定到控制器，而不是范围。因此，您可以通过控制器访问onclick，作为指令模板中的

tc.onclick（）

。

您可能希望传递一个方法作为引用：

1.将函数作为引用而不是调用传递：

<div>
  <testdirective on-click="testFunction"></testdirective>
</div>

2.更新指令：

.directive('testdirective', function(){
    return{
        restrict: 'E',
        scope: {
            onClick: '='
        },
        template: '<div><button ng-click="onClick()">What UP</button></div>',
        replace: true
    }
});

.directive（'testdirective'，function（）{
返回{
限制：'E'，
范围：{
onClick:“=”
},
模板：'怎么了'，
替换：正确
}
});

---

.

您可能希望传递一个方法作为引用：

1.将函数作为引用而不是调用传递：

<div>
  <testdirective on-click="testFunction"></testdirective>
</div>

2.更新指令：

.directive('testdirective', function(){
    return{
        restrict: 'E',
        scope: {
            onClick: '='
        },
        template: '<div><button ng-click="onClick()">What UP</button></div>',
        replace: true
    }
});

.directive（'testdirective'，function（）{
返回{
限制：'E'，
范围：{
onClick:“=”
},
模板：'怎么了'，
替换：正确
}
});

---

。 尝试通过

onClick

调用的

testFunction（）

指令作用域参数在控制器

TestController

中定义，它是指令控制器。 因此，与其通过

onClick

调用，您还可以像

template: '<div><button ng-click="testFunction()">What UP</button></div>'.

模板：'What UP'。

它非常混乱，您在指令中定义控制器，然后再次通过同一指令的作用域参数引用它的一个函数，该参数看起来像递归的

如果您想通过指令作用域参数调用，那么您应该执行以下更改

例如。 JS:

app.directive（'testdirective'，function（）{
返回{
限制：'E'，
范围：{
onClick:“&”
}, 
模板：'怎么了'，
替换：正确
}
});

好的，在您的

测试指令中，您定义了控制器
测试控制器
。
尝试通过
onClick
调用的
testFunction（）
指令作用域参数在控制器
TestController
中定义，它是指令控制器。
因此，与其通过
onClick
调用，您还可以像

template: '<div><button ng-click="testFunction()">What UP</button></div>'.

模板：'What UP'。

它非常混乱，您在指令中定义控制器，然后再次通过同一指令的作用域参数引用它的一个函数，该参数看起来像递归的

如果您想通过指令作用域参数调用，那么您应该执行以下更改

例如。
JS:


app.directive（'testdirective'，function（）{
返回{
限制：'E'，
范围：{
onClick:“&”
}, 
模板：'怎么了'，
替换：正确
}
});
直接：

.directive('testdirective', function(){
return{
restrict: 'E',
scope: {
  onClick: '=onClick'
},
controller: 'TestController',
controllerAs: 'tc',
bindToController: true,
template: '<div><button ng-click="onClick()">What UP</button></div>',
replace: true
}
})

董事：

.directive('testdirective', function(){
return{
restrict: 'E',
scope: {
  onClick: '=onClick'
},
controller: 'TestController',
controllerAs: 'tc',
bindToController: true,
template: '<div><button ng-click="onClick()">What UP</button></div>',
replace: true
}
})

你的错误是什么？什么都没有-