1

angularJs ブートストラップ ディレクティブで作成されたシンプルなタブ UI があります。

いくつかのIDを持つページにいくつのdivがあるかを数える必要があります。問題は、角度がタブをクリックするたびに関数を評価することです。これは正常ですか？関数を初回のみ呼び出されるようにするにはどうすればよいですか?

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 などのディレクティブ内にのみ配置する必要があります。

ほとんどの場合、関数を 1 回だけ実行する場合は、Angular がブートストラップされた後に実行される ng-init ディレクティブから if を呼び出すことができます。ただし、この関数はページ上の要素を処理するため、すべてがレンダリングされていることを確認する必要があります。jQuery の ready 関数に似た angular.element(document).ready を使用できます。

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

2 行目は、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>

ここで更新されたプランカーhttp://plnkr.co/edit/xkzcJfMFnmdfCQtOWEY0

于 2013-09-23T18:37:17.273 に答える