2017-05-23 19 views
0

ディレクティブに変数を渡すことに誰かが助けてくれることを願っています。私は似たような質問が他のものと同じように見える他の答えを見てきましたが、どれも直接には当てはまらず、私はそれらを理解できません。ディレクティブへの変数の受け渡し

私の問題は、異なるコントローラにある変数にアクセスできるツールバーがあることです。これが可能なのかどうかはわかりません。

これは(スコープとリンクのオプションはすべて間違っているので、彼らはただショーのためにここにいる)私のディレクティブです:

.directive('toolbar', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      page: '=' 
     }, 
     templateUrl: '/templates/toolbar.html', 
     link: function(scope, elem, attrs) { 
      scope.page = vm.page; 
     }, 
     replace: false 
    }; 
}) 

私はこのように、index.htmlの中で一度それを使用したい:

<body ng-app="app" ng-cloak layout="column"> 
    <div layout-align="center center" layout-margin flex="50"> 
     <img src="/images/logo.png" class="logo"> 
    </div> 

    <toolbar page="{{vm.page}}"></toolbar> 
    <md-content> 
     <div ui-view ng-view></div> 
    </md-content> 
</body> 
vm.pageこのように設定されているUIビューを駆動するコントローラに見出さ変数である

...

angular 
    .module('app') 
    .controller('dogsCtrl', function(dogsFactory, sessionService, 
     searchService, locationService, adoptableService, toastService, 
     errorHandlerService, $document, $mdSidenav, $scope, $state, $q) { 

     var vm = this; 
     vm.page = 'Home'; 
     vm.currentUser = sessionService.getUser(); .... 

ツールバーのサブディレクティブでvm.pageとvm.currentUserオブジェクトにアクセスできる必要があります。ツールバーのテンプレートは以下のようになります。それは今現状では

<md-toolbar class="md-menu-toolbar" hide show-gt-xs> 
<div layout="row" layout-align="space-between center"> 
    <div class="page-title" flex hide show-gt-md> 
      {{ vm.page }} 
    </div> 
    <div class="main-menu"> 
     <md-menu-bar> 
      <menu></menu> 
     </md-menu-bar>   
    </div> 

    <md-input-container class="search"> 
     <md-select name='breed' ng-model="breed._id" placeholder="Select a breed" ng-change="vm.getDogDetail(breed._id)"> 
      <md-option value="{{breed._id}}" ng-repeat="breed in vm.dbBreeds"> {{ breed.breed }}</md-option> 
     </md-select> 
    </md-input-container> 
</div> 

、私はすべてのページのツールバーディレクティブを繰り返す必要があり、私はむしろそのようにしないだろう。これは可能ですか?

答えて

1

pageは2ウェイバインディングであるので、この

<toolbar page="vm.page"></toolbar>

ようにする必要があります。

OR

変更ページscope対応するため、この

restrict: 'E', 
    scope: { 
     page: '@' 
    }, 
+0

おかげタイプ、しかし、私はそれを行うときに私が得るだけの文字列「vm.page」で、私が望んでいないものをそれは(ページのタイトル)になります。私は各ページのタイトルを渡すことができるようにしたいです(これは異なるコントローラによって駆動されます)。 – user8055142

関連する問題