如何从角度指令调用控制器功能
[英]How to call a controller function from angular directive
问题描述
I want to call controller function from directive. 
我想从指令中调用控制器功能。 Here is the fiddle. 这是小提琴。 I have a sayHello() function in controller. 我在控制器中有一个sayHello（）函数。 And I want to call that function from angular directive. 我想从angular指令中调用该函数。 If i wall like scope.sayHello(); 如果我喜欢scope.sayHello（）;
scope.sayHello is not a function
I am getting like the above in console. 我在控制台中变得像上面一样。
3 个解决方案
解决方案1
1 2017-03-29 03:03:12
To get your alert in your fiddle to fire, all I had to do what add the person into your template. 为了使您的警惕动起来，我要做的就是将这person添加到您的模板中。 You had the updateparent="updatePerson()" , and you just needed to pass the person in that call, like this: updateparent="updatePerson(person)" . 您具有updateparent="updatePerson()" ，并且只需要在该调用中传递此person ，就像这样： updateparent="updatePerson(person)" 。 Then your alert fired. 然后您的警报被触发。
The reason for this is that you need to state in the template all of the parameters that you are passing in to the function. 这样做的原因是您需要在模板中声明要传递给函数的所有参数。 Since you call it like updateparent({person: mandatePerson}) , you have to put the key person into your template that it will be called with that param. 既然你这样称呼它updateparent({person: mandatePerson})你必须把钥匙person进入你的模板，它将与param所调用。 They have to match. 他们必须匹配。
解决方案2
0 2017-03-29 03:04:33
The Angular directive's link function has arguments for both scope and controller -- if the method you want to call is directly on $scope in your controller you can just call it off of the scope arg-- if you are using controllerAs syntax (which I would recommend as it is a recommended Angular pattern ) you can call it off the controller argument. Angular指令的link函数同时具有scope和controller参数-如果要调用的方法直接在控制器的$scope ，则可以从范围arg调用它-如果使用controllerAs语法（我将会建议使用，因为它是推荐的Angular模式 ），您可以在控制器参数中调用它。
So, for your specific case (methods directly on $scope ) in your directive return object you add a property link : 因此，对于您的特定情况（方法直接在$scope ），在指令return对象中添加一个属性link ：
link: function (scope, iElement, iAttrs, controller, transcludeFn)
scope.sayHello();
}
link runs once at directive creation-- if you want the scope or method to be available outside of that for some reason, assign it to a variable defined at the top level of the module. link在指令创建时运行一次-如果出于某种原因您希望scope或方法在该scope之外可用，请将其分配给在模块顶层定义的变量。
解决方案3
0 2017-03-29 03:05:41
I changed your directive a bit, but this is how you get that sort of functionality. 我对指令进行了一些更改，但这就是您获得这种功能的方式。 FIDDLE 小提琴
If you're interested in AngularJS I would highly recommend the John papa styleguide. 如果您对AngularJS感兴趣，我强烈推荐John papa样式指南。 https://github.com/johnpapa/angular-styleguide https://github.com/johnpapa/angular-styleguide
It will get you using syntax like controllerAs and will help make your code cleaner. 它将使您使用controllerA之类的语法，并有助于使代码更整洁。
HTML 的HTML
<body ng-app="myApp" ng-controller="MainCtrl">
<div>
Original name: {{mandat.name}}
</div>
<my-directive mandat="mandat"></my-directive>
</body>
JS JS
var app = angular.module('myApp', []);
app.controller('MainCtrl', MainController);
function MainController($scope) {
$scope.mandat = {
name: "John",
surname: "Doe",
person: { id: 1408, firstname: "sam" }
};
}
app.directive('myDirective', MyDirective);
function MyDirective() {
return {
restrict: 'E',
template: "<div><input type='text' ng-model='mandat.person.firstname' /><button ng-click='updateparent()'>click</button></div>",
replace: true,
scope: {
mandat: "="
},
controller: function($scope) {
$scope.updateparent = function() {
$scope.mandat.name = "monkey";
}
}
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.