使用 AngularJS 需要选项调用另一个指令

Using the AngularJS require option to call into another directive

本文关键字：调用 另一个 指令 选项 AngularJS 使用      更新时间：2023-09-26

我只是在这里阅读有关通过require选项从另一个指令中访问一个指令的控制器的信息：

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

指令可拖放和仪表板声明在我的视图中 - 在两个不同的div 上：

  <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>

但是我似乎无法让它工作。下面的仪表板Ctrl参数为空。

在我的可放置指令中，我使用 REQUIRE 选项：

  .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。请帮助我弄清楚如何使用require。

我实际上需要调用 addWidget（） 函数，它在链接选项中;但我想我可以将其复制或移动到控制器选项中。

谢谢！鲍勃

这是一个需要droppable的"父"指令dashboard的例子，以及两者之间利用require和传递dashboardCtrl的通信

这是一篇好文章，可以看到指令到指令的沟通

小提琴示例也是从您上一个问题构建的

JSFiddle

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

编辑

根据讨论，这是我目前理解的问题的解决方案

父指令dashboard可选地要求子指令droppable并且两者之间需要通信

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

更新的 JSFiddle

相关文章：