1

我有一个使用 angularJs 引导指令制作的简单标签 UI。

我需要计算页面上有多少 div 有一些 id。问题是在每个选项卡单击时角度评估函数。这是正常的吗？如何使函数仅在第一次被调用？

PLUNKR：http ://plnkr.co/edit/HIRzYOVX8huEDL2snqJM?p=preview

$scope.test = function(){
    $scope.myId = window.document.getElementById("ciccio")
}
4

1 回答 1

3

您第一次尝试的问题是该函数被放置在 Angular 的视图数据绑定 {{}} 中，因此每当发生变化时都会调用它。视图中的函数只能放在 ng-init、ng-show 等指令中。

大多数情况下，如果您希望一个函数只运行一次，您可以从 ng-init 指令调用 if，该指令在 angular 被引导后运行。但是，由于此函数处理页面上的元素，因此您必须确保所有内容都已呈现。您可以使用 angular.element(document).ready 类似于 jQuery 的 ready 函数：

angular.element(document).ready(function () {
    var scope = angular.element(window.document.getElementById("tabsContainer")).scope();
    scope.getDivs();
});

第二行获取包装 div 的控制器的正确 $scope（我添加了#tabsContainer id：

<div id="tabsContainer" ng-controller="TabsDemoCtrl">

  <tabset vertical="true" type="navType"> 
    <tab heading="Vertical 1"><div id="ciccio">Content 1</div></tab>
    <tab heading="Vertical 2">Vertical content 2</tab>
  </tabset>

</div>

在这里更新了 plunker http://plnkr.co/edit/xkzcJfMFnmdfCQtOWEY0

于 2013-09-23T18:37:17.273 回答