范围问题导致ng-click不触发

Question

我使用angular ui tab（http://angular-ui.github.io/bootstrap/）并在js文件中添加了删除btn。我不能用我的标记来做，因为js在js侧生成模板。

当我把这个

时，我的ng-click不起作用

<span ng-click="deleteTab()" >dlt</span>

JS

$scope.deleteTab = function(){
    //$scope.tabs.splice(this, 1);
    alert('d');
}

在我的控制器内。我试图将js包括在最顶层，之前没有任何效果。直到我尝试onClick。我想知道为什么我不能在我的情况下使用ng-click？

Answer 1

如果您在不使用角度的情况下向DOM添加新的HTML，则需要$compile HTML以允许角度绑定内容和$watch更改。 See the docs

 $compile(element.contents())(scope);

修改： -
啊，你也可以将标题作为HTML模板，see the tabs definition

 <tab  ng-repeat="workspace in workspaces"

             active=workspace.active>
             <tab-heading>{{workspace.name}}<span ng-click="deleteTab()" >dlt</span></tab-heading>
            <div ng-controller="TabsChildController" >
                <div>
                    {{workspace.id}} : {{ workspace.name}}
                </div>
                <input type="text" ng-model="workspace.name"/>
            </div>     
        </tab>

和here is the solution

Answer 2

那个可以解决你的问题的傻瓜。plunker唯一的疑问是你要关闭的工作区，我想它是最后一个，否则你只需要修改删除方法。 / p>

修改

在这个版本中你可以删除所选的工作区，你必须控制css，但我瘦它可能是一个很好的解决方案 new plunker