Question

我希望有人可以帮助我把变量传递给指令。我已经查看了与我的类似问题的其他答案，但似乎没有一个直接适用和/或我不理解它们。

所以，我的问题是我有一个工具栏，我希望能够访问不同控制器中的变量。不确定这是否可能。

这是我的指令（范围和链接选项都是错误的，所以它们只是为了展示）：

.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-view的控制器中找到的变量，它设置如下...

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>

现在，我必须在每个页面上重复工具栏指令，但我宁愿不这样做。这可能吗？

Answer 1

应该是这样的

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

因为page是双向绑定。

或

将页面scope类型更改为此

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

将变量传递给指令

1 个答案: