2

Angular.js に、コントローラーとディレクティブから更新できるモデルがあります。ディレクティブを AngularUI ブートストラップ Tabs ディレクティブ内に配置すると、モデルが更新されません。コードは非常に単純で、動作するはずです。

セカンドタブを選択し、ボタンをクリックしてください。それは更新されません: ここにプランカーがあります: http://plnkr.co/edit/jdaniklxFNkdxAYaLtVQ?p=preview

<!doctype html>
<html ng-app="plunker">
  <head>
    <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>

  <body>
    <div ng-controller="TabsDemoCtrl">  
      <button ng-click="ranges=[23, 67]">Change in CTRL [23, 67]</button>
      <br/>
         This should be inside from any button: {{ranges}}
      <br/>
      <br/>
      <tabset>
         <tab heading="First">Static content</tab>
         <tab heading="Second">
           <my-directive ng-model="ranges"></my-directive>
         </tab>
      </tabset>
    <br/>
    <br/>
    <my-directive ng-model="ranges"></my-directive>
    </div>
  </body>
</html>
4

1 に答える 1

6

AngularUI の boostrap ディレクティブは子スコープを作成するため、「Second」タブ内で次を使用することで簡単に修正できます。

<my-directive ng-model="$parent.ranges"></my-directive>
于 2013-07-01T17:32:39.883 に答える