javascript - Angularjs popover nglick 第二次不会触发

Question

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

这是为了更好地理解的屏幕截图。

但是，问题是当第一次单击该元素(例如: 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是一个指令，将object传入其中并绑定(bind) Controller 中的四个方法: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

模板url代码如下:

<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>

Answer 1

替换为:

popOverContent = $compile(content)(scope)

这样:

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

;)