Angularjs 角度html搜索弹出框无法识别角度变量

我们正在尝试对ng表中的每一列进行popover搜索，但当显示popover时，它无法识别任何范围变量，或者至少找不到任何范围变量，因为{item}中没有一个解析为值。。但ng点击被识别并触发。请帮忙。我正在尝试一个解决方案，将与IE 8太和角带不工作。砰的一声：

---

将popover html保存在文件中，并通过指令“template”调用，同时在html指令标记中调用pass you object，请进一步解释解决方案。我知道如果html呈现在屏幕上，它以某种方式绑定到rootscope，$compile在绑定变量中没有帮助，但我不知道如何有条件地加载此html。您可以使用ng if或ng show了解有关指令的更多详细信息，请检查下面的链接im在popover中注入popover的html内容，而不是调用的元素。。。如果我使用template属性，它将替换单击的组件。您可以检查我上面的plunk。我试图将html内容放在模板中，并使用：content:function（）{return$compile（$templateCache.get（'advancedSearch.html'））（scope）；}但是这次，它在屏幕上显示了{{colName}}，而不是像以前那样显示为空白。。。也不是我想要的将popover html保存在文件中，并通过指令“template”调用，当从html指令标记调用pass you object时，请解释更多的解决方案。我知道如果html呈现在屏幕上，它以某种方式绑定到rootscope，$compile在绑定变量中没有帮助，但我不知道如何有条件地加载此html。您可以使用ng if或ng show了解有关指令的更多详细信息，请检查下面的链接im在popover中注入popover的html内容，而不是调用的元素。。。如果我使用template属性，它将替换单击的组件。您可以检查我上面的plunk。我试图将html内容放在模板中，并使用：content:function（）{return$compile（$templateCache.get（'advancedSearch.html'））（scope）；}但是这次，它在屏幕上显示了{{colName}}，而不是像以前那样显示为空白。。。也不是我想要的

<a class="input-group-addon sml-input-text clickable filterAnchor" style="padding: 4px 5px;" toggle="popover" role="button" class="pop-function" colname="{{column.attributeValue}}">
    <label class="glyphicon glyphicon-filter clickable" aria-hidden="true"></label>
</a>

<div id="advancedFilter" class="popover">
        <div class="arrow"></div>
        <div class="popover-content no-margin no-padding">
            <div class="panel panel-default" style="margin-bottom: 0px;width: 450px;">
                <div class="panel-heading">Filter</div>
                <div class="panel-body">
                    <span>Show rows where {{colName}}</span>
                    <form action="">
                        <div class="row show-grid" style="padding-top: 10px;padding-bottom: 10px;">
                            <div class="col-md-6">
                            <select ng-model="search.firstSearchKey">
                                <option ng-repeat="item in allSearchOptions" value="{{item}}">{{item}}</option>
                            </select>                       
                            </div>
                            <div class="col-md-6 no-margin" style="padding-left:0px">
                                <input type="text" class="form-control sml-input-text" placeholder="Enter value"  style="width:200px"/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

.directive('toggle', function($compile) {
            return {
                restrict : 'A',
                controller: function($scope, $element){
                    $scope.colName='abc';
                    $scope.hidePopover=function(){
                        $($element).popover('toggle');
                    }
                    $scope.search=function(){
                        $($element).popover('toggle');
                    }
                    $scope.allSearchOptions = ['one','two'];
                },scope: {},
                link : function(scope, element, attrs) {
                    if (attrs.toggle == "popover") {
                        scope.option={
                                placement: 'bottom',
                                container: 'body',
                                html: true,
                                content: function () {
                                    return $compile(angular.element($('#advancedFilter').html()))(scope);
                                }
                            }
                        $(element).popover(scope.option);
                    }
                }
            };
        })