AngularJs：指令从来没有所谓的 [英] AngularJs: Directive NEVER called
本文介绍了AngularJs：指令从来没有所谓的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个指令，自发地停止工作。出于某种原因，它的从不在控制台中名为，没有错误打印出来。这是奇怪，因为其他指令（其中看起来的几乎相同）的正在（看到帖子的最后一个工作指令）。
这是在指令
达到 angular.module（弹出）指令（'弹出'，['定位'，'PopupService'，//此行code的
功能（定位器，PopupService）{
返回{
限制：'A'，
范围： {
秀：=，
锚：=，
'方向'：'='
}，
链接：功能（$范围，元素，属性）{//这从来没有所谓的
$范围。$腕表（'秀'，功能（为newValue，属性oldValue）{
如果（newValue）以{//这是从来没有所谓的
VAR POS = Locator.getCenterPosition（$（$ scope.anchor））;
PopupService.togglePopup（$（元件），{
X：pos.x，
Y：pos.y，
产地：$ scope.direction，
remove_callback：功能（）{
$ scope.show = FALSE;
的console.log（显示：+ $ scope.show）;
}
}）;
}其他{
自动隐藏（）;
}
}，真正的）;
}
};
}
]）;
这是玉code，包括指令（玉是一个 HTML 模板语言）：
块中的总含量
.div {{编辑}}
。主要体（NG-控制器=editEditorControllerNG-的init =弹出窗口= {}; format.colorMode ='W'; draftID ='＃{} draftID'; draftEditorID ='＃{} draftEditorID'; draftOwnerID = '＃{draftOwnerID}'）
DIV {{commentEditor}}
UL＃左工具list.side工具 - list.tool列表（）
李＃注释工具盒
span.tool盒标题评论
span.tool箱控制区
＃工具盒控制
跨度＃注释-button.tool盒按钮（NG-点击=newComment（））添加备注
跨度＃视图评论 - button.tool盒按钮（NG-的init =popups.showCommentPopup =假NG点击=popups.showCommentPopup = TRUE; $ event.stopPropogation（）;停事件='点击'）查看评论
DIV＃评论列表容器（弹出显示=popups.showCommentPopup主播=＃视图评论按钮'的方向='顶'）//有问题的指令
评论 - 显示器＃评论列表（编辑=编辑）
这是声明在应用
VAR editEditorApp = angular.module（'editEditorApp'，['一般'，'API'，'弹出']）;
这是在订单包括
/ *应用程序* /脚本（SRC ='/ JS /角/ editEditor / editEditorApp.js'）
/ * *的JQuery /脚本（SRC ='/ JS / pxem.JQuery.js'）
/ *普通JS * /脚本（SRC =/风格/ JS /窗口height.js'）
/ * * tinyMCE的/脚本（SRC ='/ JS / ice_tinymce / TinyMCE的/ jscripts / tiny_mce / tiny_mce.js'）
/ * JQuery的DEP。 * /脚本（SRC ='/ JS / jquery.browser.min.js'）
/ *角模块 - 工厂* /脚本（SRC ='/ JS /角/ API / api.js'）
/ *角模块 - 指令* /脚本（SRC ='/ JS /角/指令/ general.js'）
/ *角模块 - 弹出（服务）* /脚本（SRC ='/ JS /角/一般/ popupService.js'）
/ *角模块 - 弹出（指令）* /脚本（SRC ='/ JS /角/指令/ popup.js'）
/ *角模块* /脚本（SRC ='/ JS /角/过滤/ cut.js'）
/ *角模块 - 工厂* /脚本（SRC ='/ JS /角/ editEditor / commentLikeCreator.js'）
/ *角模块 - 工厂* /脚本（SRC ='/ JS /角/ editEditor / autoSave.js'）
/ *角模块 - 指令* /脚本（SRC ='/ JS /角/ editEditor / commentBox.js'）
/ *角模块 - 指令* /脚本（SRC ='/ JS /角/ editEditor / editor.js内'）
此指令工作，但我不知道为什么它是：
editEditorApp.directive（'commentBox'，
功能（PopupService）{
返回{
限制：'E'，
templateUrl：/谐音/编辑注释框
更换：真实，
范围： {
意见：'='，
onDelete：=，
onHide：=，
位置：=，
秀：'='
}，
链接：功能（$范围，元素，属性）{
的console.log（链接弹出）;
$范围。$腕表（'秀'，功能（为newValue，属性oldValue）{
的console.log（新值：+为newValue）;
如果（newValue）以{
的console.log（SHOW！）;
$ scope.popup = PopupService.popPopup（$（元素）{
X：location.x，
Y：location.y，
产地：'底'，
hideOthers：真实，
remove_callback：功能（）{
$ scope.show = FALSE;
的console.log（显示：+ $ scope.show）;
}
}）;
}其他{
如果（$ scope.popup）{
$ scope.popup.removePopup（）;
}
}
}）;
}，
控制器：函数（$范围）{
的console.log（控制器）;
$ scope.delete =功能（）{
$ scope.popup.removePopup（）;
如果（$ scope.onDelete）{
$ scope.onDelete（）;
}
};
$ scope.hide =功能（）{
$ scope.popup.removePopup（）;
如果（$ scope.onHide）{
$ scope.onHide（）;
}
};
}
};
}
）;
注意：此问题已被previously下一个不同的问题贴出来，但现在我意识到，这是不是看的指令，被打破的一部分，但该指令从未被调用。我删除了上述问题，并张贴这一个。
解决方案
注意到其中的差别你用你的模块中的第一个，你的第二个申报和模块的使用。
在第一个地方不工作，你是不是把任何依赖。即使你没有任何，只是把一个空数组。
\r
\r\r
\r angular.module（'弹出'，[]）。指令（弹出 ，['定位'，'PopupService'，//此行code的到达\r
功能（定位器，PopupService）{\r
返回{\r
限制：'A'，\r
范围： {\r
秀：=，\r
锚：=，\r
'方向'：'='\r
}，\r
链接：功能（$范围，元素，属性）{//这从来没有所谓的\r
$范围。$腕表（'秀'，功能（为newValue，属性oldValue）{\r
如果（newValue）以{//这是从来没有所谓的\r
VAR POS = Locator.getCenterPosition（$（$ scope.anchor））;\r
PopupService.togglePopup（$（元件），{\r
X：pos.x，\r
Y：pos.y，\r
产地：$ scope.direction，\r
remove_callback：功能（）{\r
$ scope.show = FALSE;\r
的console.log（显示：+ $ scope.show）;\r
}\r
}）;\r
}其他{\r
自动隐藏（）;\r
}\r
}，真正的）;\r
}\r
};\r
}\r
]）; \r
I have a directive that spontaneously stopped working. For some reason, it is never called with no error prints out in the console. This is odd because other directives (which seem virtually identical) are working (see the very end of the post for a working directive).
This is the directive:
angular.module('popup').directive('popup', ['Locator', 'PopupService', // This line of code is reached
function(Locator, PopupService) {
return {
restrict: 'A',
scope: {
"show": '=',
"anchor": '=',
'direction': '='
},
link: function($scope, element, attr) { // This never called
$scope.$watch('show', function(newValue, oldValue) {
if (newValue) { // This is never called
var pos = Locator.getCenterPosition($($scope.anchor));
PopupService.togglePopup($(element), {
x: pos.x,
y: pos.y,
origin: $scope.direction,
remove_callback: function() {
$scope.show = false;
console.log("SHOW: " + $scope.show);
}
});
} else {
autoHide();
}
}, true);
}
};
}
]);
This is the Jade code including the directive (Jade is an html templating language.):
block total-content
.div {{ edit }}
.main-body(ng-controller="editEditorController" ng-init="popups = {};format.colorMode='W'; draftID='#{draftID}'; draftEditorID='#{draftEditorID}'; draftOwnerID='#{draftOwnerID}' ")
div {{ commentEditor }}
ul#left-tool-list.side-tool-list.tool-list()
li#comments-tool-box
span.tool-box-title Comments
span.tool-box-control-area
#tool-box-controls
span#comment-button.tool-box-button(ng-click="newComment()") Add Comment
span#view-comments-button.tool-box-button(ng-init="popups.showCommentPopup = false" ng-click="popups.showCommentPopup = true; $event.stopPropogation();" stop-event='click') View Comments
div#comment-list-container(popup show="popups.showCommentPopup" anchor="'#view-comments-button'" direction="'top'") // The directive in question
comment-displayer#comment-list(edit="edit")
This is the declaration for the app:
var editEditorApp = angular.module('editEditorApp', ['general', 'API', 'popup']);
And this is the order of the includes:
/* App */ script(src='/js/angular/editEditor/editEditorApp.js')
/* JQuery */ script(src='/js/pxem.JQuery.js')
/* Plain JS */ script(src='/styles/js/window-height.js')
/* Tinymce */ script(src='/js/ice_tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js')
/* JQuery dep. */ script(src='/js/jquery.browser.min.js')
/* Angular Module - factory */ script(src='/js/angular/api/api.js')
/* Angular Module - directives */ script(src='/js/angular/directives/general.js')
/* Angular Module - popup (services) */ script(src='/js/angular/general/popupService.js')
/* Angular Module - popup (directive) */ script(src='/js/angular/directives/popup.js')
/* Angular Module */ script(src='/js/angular/filter/cut.js')
/* Angular Module - factory */ script(src='/js/angular/editEditor/commentLikeCreator.js')
/* Angular Module - factory */ script(src='/js/angular/editEditor/autoSave.js')
/* Angular Module - directives */ script(src='/js/angular/editEditor/commentBox.js')
/* Angular Module - directives */ script(src='/js/angular/editEditor/editor.js')
This directive is working, but I don't know why it is:
editEditorApp.directive('commentBox',
function(PopupService) {
return {
restrict: 'E',
templateUrl: "/partials/edit-comment-box",
replace: true,
scope: {
"comment": '=',
"onDelete": '=',
"onHide": '=',
"location": '=',
"show": '='
},
link: function($scope, element, attr) {
console.log("LINK POPUP");
$scope.$watch('show', function(newValue, oldValue) {
console.log("NEW VALUE: " + newValue);
if (newValue) {
console.log("SHOW!");
$scope.popup = PopupService.popPopup($(element), {
x: location.x,
y: location.y,
origin: 'bottom',
hideOthers: true,
remove_callback: function() {
$scope.show = false;
console.log("SHOW: " + $scope.show);
}
});
} else {
if ($scope.popup) {
$scope.popup.removePopup();
}
}
});
},
controller: function($scope) {
console.log("CONTROLLER");
$scope.delete = function() {
$scope.popup.removePopup();
if ($scope.onDelete) {
$scope.onDelete();
}
};
$scope.hide = function() {
$scope.popup.removePopup();
if ($scope.onHide) {
$scope.onHide();
}
};
}
};
}
);
Note: This problem was previously posted under a different question, but I realize now that it wasn't the "watch" part of the directive that was broken, but that the directive was never called. I deleted the aforementioned question and posted this one.
解决方案
Notice the difference you use your module in the first one and your declaration and usage of module in the second one.
In the first one where it is not working, you are not putting any dependencies. Even you do not have any, just put an empty array.
angular.module('popup',[]).directive('popup', ['Locator', 'PopupService', // This line of code is reached
function(Locator, PopupService) {
return {
restrict: 'A',
scope: {
"show": '=',
"anchor": '=',
'direction': '='
},
link: function($scope, element, attr) { // This never called
$scope.$watch('show', function(newValue, oldValue) {
if (newValue) { // This is never called
var pos = Locator.getCenterPosition($($scope.anchor));
PopupService.togglePopup($(element), {
x: pos.x,
y: pos.y,
origin: $scope.direction,
remove_callback: function() {
$scope.show = false;
console.log("SHOW: " + $scope.show);
}
});
} else {
autoHide();
}
}, true);
}
};
}
]);
这篇关于AngularJs：指令从来没有所谓的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
