我的问题是我创建了一个用于控制元素宽度和偏移的弹出窗口。
以下是更好理解的屏幕截图。
然而,问题是当第一次单击元素(例如:Description1)时,弹出窗口弹出并且四个箭头的ng-click工作。但是第二次单击元素,弹出窗口仍然会出现,但是四个箭头的ng-click不再起作用了!
以下是html代码的一部分:
<div id="sortable" ng-repeat="object in arrayForShow">
<div ng-show="checkType(object)">
<div ng-switch on="getKeyValue(object)">
<div ng-switch-when="default">
<div ng-class="classGenerate(object)" class="well nomargin" id="resizable" pop-over-width-offset argument='object' addwidth='addWidth(object)' decreasewidth='decreaseWidth(object)' addoffset='addOffset(object)' decreaseoffset='decreaseOffset(object)'>
{{object.default}}
</div>
pop-over-width-offset 是一个指令,并将对象传递给它并绑定四个方法:addWidth,addOffset,decreaseOffset,它们位于控制器中。
指令部分代码:
app.directive "popOverWidthOffset", ($templateCache, $compile)->
restrict: 'A',
controller: 'CustomiseFormCtrl'
scope: {
argument: '='
addwidth: '&'
decreasewidth: '&'
addoffset: '&'
decreaseoffset: '&'
}
link: (scope, element, attrs)->
content = $templateCache.get('angular/templates/popOverCustomisationChangeWidthOffset.html')
scope.$watch 'content', ()->
popOverContent = $compile(content)(scope)
options = {
content: popOverContent,
placement: "top",
html: true,
trigger: "click"
}
$(element).popover(options)
, true
模板网址代码如下:
<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>
答案 0 :(得分:1)
替换它:
popOverContent = $compile(content)(scope)
&#13;
用这个:
popOverContent = function() {
return $compile(content)(scope);
};
&#13;