使用AngularJS要求选项调用到另一个指令 [英] Using the AngularJS require option to call into another directive

问题描述

我只是读在这里对通过需要选择另一个指令内访问一个指令的控制器：

I was just reading here about accessing one directive's controller from within another directive via the require option:

  http://jasonmore.net/angular-js-directives-difference-controller-link/

该指令投掷的和仪表板的声明对我的看法 - 在两个不同的div：

The directive droppable and dashboard declarations in on my view - on two different divs:

  <div class="wrapper wrapper-content animated fadeInRight">
<div class="row">        
    <div class="col-lg-12" data-droppable drop="handleDrop">
        <div id="dash" dashboard="dashboardOptions" class="dashboard-container"></div>
    </div>
</div>

不过，我似乎无法得到它的工作。下面我dashboardCtrl参数是NULL。

However I can't seem to get it to work. My dashboardCtrl param below is NULL.

下面我投掷的指令，我使用require选项：

Here in my droppable directive, I use the REQUIRE option:

  .directive('droppable', function () {
return {
    scope: {
        drop: '&',
    },
    //****************** dashboard directive is optionally requested ************
    require: '?dashboard', 

    link: function (scope, element, attributes, dashboardCtrl) {
         el.addEventListener('drop', function (e) {

            if (e.preventDefault) { e.preventDefault(); }

            this.classList.remove('over');
            var item = document.getElementById(e.dataTransfer.getData('Text'));                
            this.appendChild(item.cloneNode(true));

            // *** CALL INTO THE dashboardCtrl controller ***
            dashboardCtrl.addWidgetInternal();


            return false;
        }, false);
    }
}
});

和仪表盘指令：

 angular.module('ui.dashboard')
.directive('dashboard', ['WidgetModel', 'WidgetDefCollection', '$modal', 'DashboardState', '$log', function (WidgetModel, WidgetDefCollection, $modal, DashboardState, $log) {
  return {
      restrict: 'A',
      templateUrl: function (element, attr) {
          return attr.templateUrl ? attr.templateUrl : 'app/shared/template/dashboard.html';
      },
      scope: true,      
      controller: ['$scope', '$attrs', function (scope, attrs) {
            // ommitted for brevity
        }],
      link: function (scope) {                
            scope.addWidgetInternal = function (event, widgetDef) {
              event.preventDefault();
              scope.addWidget(widgetDef);
          };
      };
   }
}]);

不过，我的 dashboardCtrl 参数为NULL。请帮我弄清楚如何使用要求。

However, my dashboardCtrl parameter is NULL. Please help me to figure out how to use require.

其实，我需要调用addWidget（）函数，这是链接选项之内;但我想我可以复制或移动到控制器选项。

I actually need to call the addWidget() function, which is within the link option; but I suppose I can copy or move that into the controller option.

谢谢！
鲍勃

推荐答案

下面是上级指令仪表要求的例子投掷的和通信两个利用<$ C $的C>要求和传球之间的 dashboardCtrl

Here is an example of "parent" directive dashboard requiring droppable, and communication between the two making use of require and passing dashboardCtrl

这里 是一个很好的文章见指令指令通信

Here is a good article to see directive to directive communication

小提琴例子也从previous问题建

Fiddle example also built from your previous question

app.directive('droppable', [function () {
    return {
        restrict: 'A',
        require: 'dashboard',
        link: function (scope, elem, attrs, dashboardCtrl) {

            dashboardCtrl.controllerSpecificFunction('hello from child directive!');

            scope.addWidgetInternal = function(message) {
                console.log(message);
            }
        }
    }
}]);

app.directive('dashboard', [function () {
    return {
        restrict: 'A',
        controller: function ($scope) {
            $scope.handleDrop = function(message) {
                $scope.addWidgetInternal(message)
            }

            this.controllerSpecificFunction = function(message) {
                console.log(message);
           }
        }
    }
}]);

修改

基于讨论

，这里是我目前了解的问题要解决。

Edit

Based on discussion, here is a solution for what I currently understand the problem to be

父指令仪表可选要求子指令投掷的，并需要有两者之间的通信

Parent directive dashboard optionally requires child directive droppable and there needs to be communication between the two

<div dashboard>
    <button id="dash" droppable ng-click="handleDrop($event)">Handle Drop</button>
</div>

app.directive('droppable', [function () {
    return {
        restrict: 'A',
        require: '^?dashboard',
        link: function (scope, elem, attrs, dashboardCtrl) {
            scope.handleDrop = function($event) {
                dashboardCtrl.addWidgetInternal($event);
            }
        }
    }
}]);

app.directive('dashboard', [function () {
    return {
        restrict: 'A',
        controller: function ($scope) {
            this.addWidgetInternal = function($event) {
                console.log($event);
           }
        }
    }
}]);

这篇关于使用AngularJS要求选项调用到另一个指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！