Директива с двусторонним связыванием

Question

Я отношусь к новой версии AngularJS и пытаюсь создать директиву для добавления некоторых кнопок. Я пытаюсь изменить область управления внутри директивы, но я не могу заставить ее работать. Вот пример из моего приложения

app.controller('invoiceManagementController', ['$scope', function ($scope) { 
    $scope.gridViewOptions = { 
     isFilterShown: false, 
     isCompact: false 
    }; 
}]); 

app.directive('buttons', function() { 
    return { 
     restrict: 'A', 
     template: '<button type="button" data-button="search" title="Filter"><i class="glyphicon glyphicon-search"></i></button>', 
     scope: { 
      gridViewOptions: '=' 
     }, 
     transclude: true, 
     link: function (scope, element, attr, ctrl, transclude) { 
      element.find("button[data-button='search']").bind('click', function (evt) { 
       // Set the property to the opposite value 
       scope.gridViewOptions.isFilterShown = !scope.gridViewOptions.isFilterShown 

       transclude(scope.$parent, function (clone, scope) { 
        element.append(clone); 
       }); 
      }); 
     } 
    }; 
}); 

Мой HTML как следующий

{{ gridViewOptions.isFilterShown }} 
<div data-buttons="buttons" data-grid-view-options="gridViewOptions"></div> 

Область внутри директивы делает изменения, но, как изолированные, я стараюсь платить со свойством области действия и transclude, но я» m, вероятно, что-то не хватает, хотелось бы получить некоторый свет здесь

Answer 1

Когда вы изменяете область видимости внутри функции ссылки своей директивы, вы изменяете изолированную область действия своей директивы (потому что это то, что вы настроили). Для того, чтобы изменить родительский объем, вы можете поставить задание области видимости внутри вашей функции transclude:

transclude(scope.$parent, function (clone, scope) { 
    // Set the property to the opposite value 
    scope.gridViewOptions.isFilterShown = !scope.gridViewOptions.isFilterShown 
    element.append(clone); 
}); 

Answer 2

Ok, наконец, нашел решение для этого после более некоторых исследований сегодня. Не уверен, что лучшее решение, но сейчас это работает так хорошо.

app.controller('invoiceManagementController', ['$scope', function ($scope) { 
    $scope.gridViewOptions = { 
     isFilterShown: false, 
     isCompact: false 
    }; 
}]); 

app.directive('buttons', function() { 
    return { 
     restrict: 'A', 
     template: '<button type="button" data-button="search" data-ng-class="gridViewOptions.isFilterShown ? \'active\' : ''" title="Filter"><i class="glyphicon glyphicon-search"></i></button>', 
     scope: { 
      gridViewOptions: '=' 
     }, 
     link: function (scope, element, attr, ctrl, transclude) { 
      element.find("button[data-button='search']").bind('click', function (evt) { 
       scope.$apply(function() { 
        // Set the property to the opposite value 
        scope.gridViewOptions.isFilterShown = !scope.gridViewOptions.isFilterShown; 
       }); 
      }); 
     } 
    }; 
});