Question

我是angularJS的新手，我试图做一些可重复使用的代码。当然，我阅读文档并看到了this tutorial。

这个想法：用于实例化弹出窗口的指令D1 指令D2仅管理其内容我希望D2指令将她的错误发送到D1指令。

问题：在指令D2中，popupController为空（Object {}）。

除了我尝试访问此控制器之外，其他工作都有效，这就是为什么我只在相关部分剪切代码的原因。

我的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'
    };
});

她的主持人：

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);
        }
    };
});

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
            ...
  };
});

内容控制器：

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");
      }
    };
}]);

编辑，我忘记了HTML：主要的HTML：

<popup popup-title="Use case management" notifier="true" show='modalShown'
                                   width='330px' height='450px'>
     <content-dialog show='modalShown'></content-dialog>
</popup>

谢谢：）

Answer 1

问题是在popupController中你只将函数添加到$ scope，而不是控制器本身。在popupController中更改为以下内容：

  this.manageError = $scope.manageError = function(message) {
    if ($scope.hasNotifier())
    {
        $scope.resetContext();
        $scope.errorMessage = message;
        $scope.errorDomElement.slideDown(200).delay(10000).slideUp(200);
    }
};

指令通信指令：控制器空（= {}） - AngularJS

1 个答案: