지시어에 변수 전달하기

누군가가 내 지시어에 변수를 전달하는 것에 대해 머리를 맞출 수 있기를 바랍니다. 나는 비슷한 질문을하는 것에 대한 다른 대답을 보았지만 아무도 직접적으로 적용하지 못하거나 이해할 수 없다.지시어에 변수 전달하기

내 문제는 다른 컨트롤러에서 발견 된 변수에 액세스 할 수있게하려는 도구 모음이 있다는 것입니다. 이것이 가능한지 확실하지 않습니다. 나는이 같은 index.html을 한 번 사용하려는

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

이

내 지시어 (범위 및 링크 옵션은 모든 잘못, 그래서 그들은 단지 쇼를 위해 현재)이다

<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 이렇게 설정된 인터페이스 뷰를 구동 제어기에서 발견되는 변수이다

...

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>

, 나는 모든 페이지에 도구 모음의 지시를 반복해야하지만 오히려 그런 식으로하지 않을 것입니다. 이것이 가능한가? page 바인딩 양방향이기 때문에

출처

2017-05-23 user8055142

그것은이

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

같을 것이다.

또는

변경 페이지 scope 응답이

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

출처

2017-05-23 18:20:42

덕분 유형,하지만 나는 그렇게 할 때 얻을 그냥 문자열 'vm.page'내가 원하지 않는 것을 그것은 (페이지의 제목) 수 있습니다. 각 페이지 (다른 컨트롤러에 의해 구동 됨)의 제목을 전달할 수 있기를 원합니다. – user8055142

답변

관련 문제