[英]Directive to directive communication : controller empty ( ={ } )- AngularJS
I'm new to angularJS and I'm trying to do some reusable code. 我是angularJS的新手,正在尝试编写一些可重用的代码。 I, of course, read the documentation and saw this tutorial .
我当然阅读了文档并看了本教程 。
The idea : A directive D1 to instantiate a popup A directive D2 to manage only it's content I want the D2 directive to send her errors to the D1 directive. 想法:指令D1实例化弹出窗口指令D2仅管理其内容我希望D2指令将她的错误发送给D1指令。
The problem : In the directive D2, the popupController is empty (Object {}). 问题:在指令D2中,popupController为空(对象{})。
Everyting works except when I try to access this controller, that's why I cut the code only on the concerned part. 除了我尝试访问此控制器时,其他所有东西都起作用,这就是为什么我只在相关部分剪切代码。
My popupDirective : 我的popupDirective:
app.directive('popup', function($compile){
return {
restrict: 'E',
scope: {
show: '=',
title: "@popupTitle",
notifier: "@notifier"
},
controller: 'popupController',
replace: false,
transclude: true,
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
templateUrl: 'Popup.html'
};
});
Her Controller : 她的控制器:
app.controller('popupController', function($scope) {
$scope.errorMessage = "";
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
$scope.hideModal = function() {
$scope.show = false;
};
$scope.hasNotifier = function()
{
return $scope.notifier;
};
$scope.manageError = function(message) {
if ($scope.hasNotifier())
{
$scope.resetContext();
$scope.errorMessage = message;
$scope.errorDomElement.slideDown(200).delay(10000).slideUp(200);
}
};
});
The contentDirective : contentDirective:
app.directive('contentDialog', function($compile) {
return {
restrict: 'E',
scope: {},
// Search for the controller on the paren element
require: '^popup',
controller: 'ContentController',
replace: true, // Replace with the template below
link: function(scope, element, attrs, popupController) {
...
scope.popupCtrl = popupController;
console.log(popupController);
popupController.manageError("salut");
// HERE THE POPUPCONTROLLER IS EMPTY
...
};
});
The content controller : 内容控制器:
app.controller('ContentController', ['$scope', 'ContentRs', function($scope, UseCase) {
...
$scope.updateContent = function()
{
if($scope.selectedContent.id !== -1)
{
var description = $scope.getSelectedContentDescription();
ContentRs.update({
id: $scope.selectedContent.id,
name: $scope.selectedContent.name,
description: description
}, function(){
// on sucess
$scope.resetContext();
}, function(){
// on failure
$scope.popupCtrl.manageError("Update failed.");
// HERE THE POPUPCONTROLLER IS EMPTY
});
}
else
{
console.log("Error");
}
};
}]);
Edit, I forgot the html : Main html : 编辑,我忘了html:主要html:
<popup popup-title="Use case management" notifier="true" show='modalShown'
width='330px' height='450px'>
<content-dialog show='modalShown'></content-dialog>
</popup>
Thank you :) 谢谢 :)
The problem is that inside your popupController you only add the functions to the $scope, but not the controller itself. 问题是在popupController内部,您仅将函数添加到$ scope中,而没有将其添加到控制器本身中。 Change to the following inside your popupController:
在popupController内部更改为以下内容:
this.manageError = $scope.manageError = function(message) {
if ($scope.hasNotifier())
{
$scope.resetContext();
$scope.errorMessage = message;
$scope.errorDomElement.slideDown(200).delay(10000).slideUp(200);
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.