angularjs NG-单击弹出了里面的指令无法正常工作 [英] angularjs ng-click not working inside the pop over directive
本文介绍了angularjs NG-单击弹出了里面的指令无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我加了一些按钮，在弹出了模板。
当页面完成加载第一次，点击页面上的元素显示酥料饼，并在酥料饼上的按钮点击时，每个人都工作正常。但是，隐藏，并再次显示酥料饼后，该按钮不起作用了。
我知道流行过重新创建它显示/隐藏每次DOM节点。所以我加了 $编译（内容）（范围），但它仅适用第一次。
下面是我的指令：
app.directivepopOverWidthOffset（$ templateCache，$编译） - GT; getTemplate =（） - ＆GT;
模板= $ templateCache.get（'角/模板/ popOverCustomisationChangeWidthOffset.html'） 限制：'A'
替换：真
范围： {
说法：'='
addwidth：'和;'
decreasewidth：'和;'
addoffset：'和;'
decreaseoffset：'和;'
}
链接：（范围，元素，ATTRS） - GT;
内容= getTemplate（）
的console.log（内容）
popOverContent = $编译（内容）（范围）
选项= {
内容：popOverContent，
位置：顶，
HTML：真实，
触发：点击
}
$（元素）.popover（选项）
下面是模板：
＆LT;表＆gt;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;一类=BTN BTN-链接NG点击=addwidth（参数）＆GT;
＆LT;跨度类=glyphicon glyphicon - 雪佛龙达＆GT;
＆所述; / A＆GT;
＆LT; / TD＆GT;
＆LT; TD＆GT;＆安培; NBSP;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;一类=BTN BTN-链接＆GT;
＆LT;跨度类=glyphicon glyphicon-字形向上NG点击=addoffset（参数）＆GT;
＆所述; / A＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=表单组WIDTH =40像素;＆GT;
＆LT;输入类=表格控NG模型=argument.position [1]的风格=文本对齐：中心;＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT; ＆LT; / TD＆GT;
＆LT; TD类=表单组WIDTH =40像素;＆GT;
＆LT;输入类=表格控NG模型=argument.position [2]的风格=文本对齐：中心;＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;一类=BTN BTN-链接NG点击=decreasewidth（参数）＆GT;
＆LT;跨度类=glyphicon glyphicon-字形向下＆GT;
＆所述; / A＆GT;
＆LT; / TD＆GT;
＆LT; TD＆GT;＆安培; NBSP;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;一类=BTN BTN-链接＆GT;
＆LT;跨度类=glyphicon glyphicon-字形向下的NG-点击=decreaseoffset（参数）＆GT;
＆所述; / A＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
解决方案
（函数（角，$）{
使用严格的; 。PopoverCtrl $注射='$范围，$窗口'];
功能PopoverCtrl（$范围，$窗口）{
$ scope.foo ='范围富';
$ scope.bar =功能（）{
$ window.alert（'酒吧叫'）;
};
} 。PopoverDirective $注射='$ templateCache'，'$编译'];
功能PopoverDirective（$ templateCache，$编译）{
返回{
控制器：'PopoverCtrl'，
链接：popoverLinkFn
}; 功能popoverLinkFn（范围，ELEM）{
/ **
*初始化酥料饼
* /
功能initPopover（）{
//读取内容
VAR内容= $（$ templateCache.get（'/ popover.html'））; //编译
$编译（内容）（范围）; //酥料饼选项
VAR的选择= {
HTML：真实，
内容：内容
}; elem.popover（选件）;
} //调用初始化
initPopover（）; //关于范围清理销毁
（范围。在$（'$破坏'，功能）{
elem.popover（'消灭'）;
}）;
}
} angular.module（'应用'，[]）
.controller（'PopoverCtrl'，PopoverCtrl）
.directive（'酥料饼'，PopoverDirective）;}）（window.angular，window.angular.element）;
I added some buttons in the pop over template.
When the page finishes loading the first time, clicking on the element on the page shows the popover, and when clicking on the buttons in the popover, every one works fine. But after hiding and showing the popover again, the buttons do not work any more.
I know that the pop over recreates the DOM node every time it is shown/hidden. So I added $compile(content)(scope), but it only works the first time.
Here is my directive:
app.directive "popOverWidthOffset", ($templateCache, $compile)->
getTemplate = ()->
template = $templateCache.get('angular/templates/popOverCustomisationChangeWidthOffset.html')
restrict: 'A'
replace: true
scope: {
argument: '='
addwidth: '&'
decreasewidth: '&'
addoffset: '&'
decreaseoffset: '&'
}
link: (scope, element, attrs)->
content = getTemplate()
console.log(content)
popOverContent = $compile(content)(scope)
options = {
content: popOverContent,
placement: "top",
html: true,
trigger: "click"
}
$(element).popover(options)
Here is the template:
<table>
<tbody>
<tr>
<td>
<a class="btn btn-link" ng-click="addwidth(argument)">
<span class="glyphicon glyphicon-chevron-up">
</a>
</td>
<td> </td>
<td>
<a class="btn btn-link">
<span class="glyphicon glyphicon-chevron-up" ng-click="addoffset(argument)">
</a>
</td>
</tr>
<tr>
<td class="form-group" width="40px;">
<input class="form-control" ng-model="argument.position[1]" style="text-align: center;">
</td>
<td> </td>
<td class="form-group" width="40px;">
<input class="form-control" ng-model="argument.position[2]" style="text-align: center;">
</td>
</tr>
<tr>
<td>
<a class="btn btn-link" ng-click="decreasewidth(argument)">
<span class="glyphicon glyphicon-chevron-down">
</a>
</td>
<td> </td>
<td>
<a class="btn btn-link">
<span class="glyphicon glyphicon-chevron-down" ng-click="decreaseoffset(argument)">
</a>
</td>
</tr>
</tbody>
</table>
解决方案
(function(angular, $) {
'use strict';
PopoverCtrl.$inject = ['$scope', '$window'];
function PopoverCtrl($scope, $window) {
$scope.foo = 'scope foo';
$scope.bar = function() {
$window.alert('bar called');
};
}
PopoverDirective.$inject = ['$templateCache', '$compile'];
function PopoverDirective($templateCache, $compile) {
return {
controller: 'PopoverCtrl',
link: popoverLinkFn
};
function popoverLinkFn(scope, elem) {
/**
* Initialise popover
*/
function initPopover() {
// Read content
var content = $($templateCache.get('/popover.html'));
// Compile it
$compile(content)(scope);
// Popover options
var options = {
html: true,
content: content
};
elem.popover(options);
}
// Call init
initPopover();
// Cleanup on scope destroy
scope.$on('$destroy', function() {
elem.popover('destroy');
});
}
}
angular.module('app', [])
.controller('PopoverCtrl', PopoverCtrl)
.directive('popover', PopoverDirective);
})(window.angular, window.angular.element);
这篇关于angularjs NG-单击弹出了里面的指令无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
