如何从指令调用控制器功能? [英] How to call controller function from directive?
问题描述
如何从指令调用控制器函数?或如何从控制器访问指令 ng-model?例如.我使用 angular ui bootstrap 时间组件，当时间改变时，我需要通知控制器中的调用函数.我认为总的来说这是组件之间双向通信的典型用例.
how to call controller function from directive? or howto access directive ng-model from controller? eg. I use angular ui bootstrap time component and when time change I need to notify calling function in controller. I think in general it's typical use case for two way communication between components.
appControllers.controller('mainCtrl', ['$scope',
function($scope) {
$scope.changedTime = function(time) {
alert(time);
}
}]).directive('timePicker',['$http', function($http) {
return {
restrict: 'AE',
templateUrl: 'partials/time-picker.html',
scope: true,
controller: 'TimepickerDemoCtrl'
};
}]);
//partials/time-picker.html:
<span ng-controller="TimepickerDemoCtrl">
<timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
</span>
//TimepickerDemoCtrl (copy from source):
var TimepickerDemoCtrl = function ($scope) {
$scope.mytime = new Date();
$scope.hstep = 1;
$scope.mstep = 15;
$scope.options = {
hstep: [1, 2, 3],
mstep: [1, 5, 10, 15, 25, 30]
};
$scope.ismeridian = true;
$scope.toggleMode = function() {
$scope.ismeridian = ! $scope.ismeridian;
};
$scope.update = function() {
var d = new Date();
d.setHours( 14 );
d.setMinutes( 0 );
$scope.mytime = d;
};
$scope.changed = function () {
console.log('Time changed to: ' + $scope.mytime);
};
};
推荐答案
这是一个骨架应用程序，它演示了如何从指令调用父控制器函数，同时使用隔离作用域避免紧耦合(这增强了可重用性):
Here is a skeleton app that demonstrates how you can call parent controller functions from directives while using isolate scope to avoid tight coupling (which enhances reusability):
JS:
angular.module('myApp', [])
.controller('MyController', function($scope){
$scope.showAlert = function(value){
alert('Called from directive: ' + value);
};
})
.directive('myDirective', function(){
return {
restrict: 'E',
scope: {
alert: '&'
},
controller: function($scope){
$scope.value = 'directive scope value';
},
template: '<button ng-click="alert({message: value})">Alert</button>'
}
});
HTML:
<body ng-app="myApp" ng-controller="MyController">
<my-directive alert="showAlert(message)"></my-directive>
</body>
需要重点关注的是在指令的 scope: { ... } 设置中使用 & 符号.在这种情况下，它使您能够在 HTML 中指令声明的 alert 属性中命名控制器函数.
The thing to focus on is the use of the & symbol in the scope: { ... } setting of the directive. In this case, it provide you with the ability to name the controller function in the alert attribute of your directive declaration in the HTML.
然后可以从指令的模板中调用该函数.
That function can then be called from the template of the directive.
在学习 Angular 中的指令时，使用隔离作用域是一个常见的痛点，但花时间仔细研究一下是非常值得的.
Using isolate scope is a common pain point when learning about directives in Angular, but it is well-worth taking the time to wrap your head around.
特别是关于 & 的使用，我发现 这个视频特别有用.
Regarding the use of & in particular, I found this video to be especially helpful.
这篇关于如何从指令调用控制器功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
