使用 AngularJS require 选项调用另一个指令 [英] Using the AngularJS require option to call into another directive
问题描述
我刚刚在这里阅读了有关通过 require 选项从另一个指令访问一个指令的控制器的信息:
http://jasonmore.net/angular-js-directives-difference-controller-link/我的视图中的指令 droppable 和仪表板声明 - 在两个不同的 div 上:
<div class="row"><div class="col-lg-12" data-droppable drop="handleDrop"><div id="dash"dashboard="dashboardOptions" class="dashboard-container"></div>但是我似乎无法让它工作.我下面的dashboardCtrl 参数为NULL.
在我的 droppable 指令中，我使用了 REQUIRE 选项:
.directive('droppable', function () {返回 {范围: {drop: '&',},//******************** 仪表板指令是可选的 ************要求:'?仪表板'，链接:函数(范围、元素、属性、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));//*** 调用dashboardCtrl控制器***仪表板Ctrl.addWidgetInternal();返回假；}， 错误的);}}});和仪表板指令:
angular.module('ui.dashboard').directive('dashboard', ['WidgetModel', 'WidgetDefCollection', '$modal', 'DashboardState', '$log', function (WidgetModel, WidgetDefCollection, $modal, DashboardState, $log) {返回 {限制:'A'，templateUrl:函数(元素，属性){返回 attr.templateUrl ?attr.templateUrl : 'app/shared/template/dashboard.html';},范围:真实，控制器:['$scope', '$attrs', function (scope, attrs) {//为简洁起见省略}],链接:功能(范围){scope.addWidgetInternal = 函数(事件，widgetDef){event.preventDefault();scope.addWidget(widgetDef);};};}}]);但是，我的 dashboardCtrl 参数是 NULL.请帮我弄清楚如何使用require.
我实际上需要调用链接选项中的 addWidget() 函数；但我想我可以将其复制或移动到控制器选项中.
谢谢！鲍勃
这里是一个父"指令 dashboard 需要 droppable 的例子，以及两者之间的通信使用 require 并传递 dashboardCtrl
这里是一篇很好的文章请参阅指令通信的指令
小提琴示例也是根据您之前的问题构建的
JSFiddle
app.directive('droppable', [function() {返回 {限制:'A'，要求:'仪表板'，链接:函数(范围、元素、属性、仪表板Ctrl){dashboardCtrl.controllerSpecificFunction('来自子指令的你好！');scope.addWidgetInternal = 函数(消息){控制台日志(消息)；}}}}]);app.directive('仪表板', [function () {返回 {限制:'A'，控制器:函数($scope){$scope.handleDrop = 函数(消息){$scope.addWidgetInternal(消息)}this.controllerSpecificFunction = 函数(消息){控制台日志(消息)；}}}}]);编辑
根据讨论，这里是我目前理解的问题的解决方案
父指令 dashboard 可选地需要子指令 droppable 并且两者之间需要通信
<button id="dash" droppable ng-click="handleDrop($event)">处理下拉</button>app.directive('droppable', [function() {返回 {限制:'A'，要求:'^?仪表板'，链接:函数(范围、元素、属性、仪表板Ctrl){scope.handleDrop = 函数($event){仪表板Ctrl.addWidgetInternal($event);}}}}]);app.directive('仪表板', [function () {返回 {限制:'A'，控制器:函数($scope){this.addWidgetInternal = function($event) {console.log($event);}}}}]);更新了 JSFiddle
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/
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>
However I can't seem to get it to work. My dashboardCtrl param below is NULL.
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);
}
}
});
and the dashboard directive :
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);
};
};
}
}]);
However, my dashboardCtrl parameter is NULL. Please help me to figure out how to use require.
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.
thank you ! Bob
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
Fiddle example also built from your previous question
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);
}
}
}
}]);
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);
}
}
}
}]);
Updated JSFiddle
这篇关于使用 AngularJS require 选项调用另一个指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
