DirectiveからAngularJSスコープにアクセスする

Question

私が作成したDirectiveからclickイベントで更新できるように、アプリケーションコントローラで定義されたスコープ変数にアクセスしようとしていますが、グローバルにアクセスできないスコープを分離したスコープから削除します。

スコープ変数（currentTitle）に定義される：

app.controller('news', function($scope, $http, $timeout) { 
$scope.promise = $timeout(function() { //This is here just to mock the asynchronous loading of the data 
$scope.articles = [{ 
    title: 'Article 1', 
    content: 'It works!' 
}, { 
    title: 'Article 2', 
    content: 'It still works' 
}] 
}, 3000); 

$scope.currentTitle = "my - title"; 
$scope.showDetails = false; 
}); 

とディレクティブで定義された範囲である：ここで

scope: { 
    //bind the showDetails into the scope so it can be seen by all of the accordion elements 
    promise: '&?', 
    currentTitle: '=?', 
    showDetails: '=?bind' 
} 

は、すべてのコードが含まれてcodePenある：http://codepen.io/valecarlos/pen/bpmryw

私がやりたいことは、タイトルの1つがクリックされたときにヘッダータイトルを更新することです。今は、スコープのでアップデートをハードコードしようとしています変数と$apply - ディレクティブでclickイベントが挿入されていますが、ヘッダーのタイトルに反映されていません。

ありがとうございました！

Answer 1

はこれにあなたのディレクティブのスコープにごcurrentTitleキーを設定してみてください。親コントローラのcurrentTitleをディレクティブのスコープから簡単に変更できるようにする2ウェイバインディングを作成します。

JS

scope: { 
    ... 
    currentTitle: '=', 
    ... 
    }, 

HTML

  <accordion promise="promise" current-title="currentTitle"> 
      <!--<dt ng-repeat-start="article in articles" ng-class="showDetails ? 'show-titles' : 'show-titles-not'">.--> 
      <dt ng-repeat-start="article in articles" ng-class="{'show-titles' : showDetails}"> 
      <div class="grid-30"> 
       <div class="round-div"></div> 
      </div> 
      <div class="grid-70"> 
       <h5>{{article.title}}</h5> 
      </div> 

      </dt> 
      <dd ng-repeat-end="" ng-class="{'show-titles' : showDetails}"> 
       <div class="grid-40"> 
        <img src={{article.image}} alt=""> 
       </div> 
       <div class="grid-60"> 
        <div class="news-desc"> 
         <h5> 
          {{article.title}} 
         </h5> 
         <p> 
          {{article.content}} 
         </p> 
        </div> 
       </div> 
      </dd> 
     </accordion> 

Answer 2

"&"構文の関数を渡す場合は、ディレクティブ内で呼び出すことができます。

のは、コントローラ内の関数を仮定しますが、次のようになります。

$scope.someFunction = function(someParameter) {...} 

次に、あなたのディレクティブは次のようになります。

 
... 
    scope { 
     someFunction: "&" 
    } 
... 
//in link or controller 
$scope.someFunction({someParameter:'foo'});