Angularjs popover nglick不会在第二次触发

时间:2014-05-17 22:50:51

标签: javascript jquery angularjs twitter-bootstrap

我的问题是我创建了一个用于控制元素宽度和偏移的弹出窗口。

以下是更好理解的屏幕截图。

然而,问题是当第一次单击元素(例如: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>&nbsp;</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>&nbsp;</td>
            <td>
                <a class="btn btn-link">
                    <span class="glyphicon glyphicon-chevron-down" ng-click="decreaseoffset(argument)">
                </a>
            </td>
        </tr>
    </tbody>
</table>

enter image description here

1 个答案:

答案 0 :(得分:1)

替换它:

&#13;
&#13;
popOverContent = $compile(content)(scope)
&#13;
&#13;
&#13;

用这个:

&#13;
&#13;
popOverContent = function() {
  return $compile(content)(scope);
};
&#13;
&#13;
&#13; )