Как автоматически передавать строковые и bool переменные в родительскую область директивы

RE: Для объектов он работает хорошо, но не с строками и булерами

Я думаю, что это обычный случай проблемы прототипного наследования. Когда модель исходит из объекта, она работает хорошо, но если она исходит из не-объектов, существует вероятность того, что ng-модель будет создана в дочерней области.

Чтобы решить эту проблему, используйте современный подход, используйте Controller as подхода. Или поставьте filterModelIsOpened в объекте. Первый подход лучше.

 <div ng-controller="SomeController as s">
     <path-filter-modal is-opened="s.filterModalIsOpened">
 </div>


  function SomeController() { // no need to use $scope
      this.filterModalIsOpened = false;
  }

Или, если вы используете более старую версию Angular, вы не можете использовать Controller as подхода. Просто создайте свой собственный псевдоним в контроллере:

 <div ng-controller="SomeController">
     <path-filter-modal is-opened="s.filterModalIsOpened">
 </div>


  function SomeController($scope) { 
      $scope["s"] = this;
      this.filterModalIsOpened = false;
  }

Здесь хорошая статья, объясняющая прототипное наследование: http://codetunnel.io/angularjs-controller-as-or-scope/

Вот демо, почему вы всегда должны префикс вашей модели, будь то объект или примитив.

Не рекомендуется. Демо-версия Live-кода: http://jsfiddle.net/hdks813z/1/

<div ng-app="App" ng-controller="Ctrl">

    <div ng-if="true">    
           <input type="checkbox" ng-model="filterModalCanBeOpened"/>
           <the-directive primitive-param="filterModalCanBeOpened"></the-directive>
    </div>    

    <hr/>
    <p>
    The value below doesn't react to changes in primitive(non-object) property 
    that is created a copy on a directive(e.g., ng-repeat, ng-if) that creates 
    child scope
    </p>    
    $scope.primitive: {{filterModalCanBeOpened}} 

</div>

angular.module('App', [])
    .directive('theDirective', function () {
    return {
        restrict: 'AE',
        scope: {
            primitiveParam: '='            
        },
        template: '<div>primitiveParam from directive: {{ primitiveParam }}; </div>',
        link: function (scope) {            
        }
    };
})
.controller('Ctrl', ['$scope', function ($scope) {
    $scope.filterModalCanBeOpened = true;
}]);

Рекомендуем: Демо-версия живого кода: http://jsfiddle.net/2rpv27kt/

<div ng-app="App" ng-controller="Ctrl as c">

    <div ng-if="true">    
           <input type="checkbox" ng-model="c.filterModalCanBeOpened"/>
           <the-directive primitive-param="c.filterModalCanBeOpened"></the-directive>
    </div>    

    <hr/>
    <p>
    The value below react to changes in primitive(non-object) property that is 
    addressed directly by its alias c, creating child scope on it would be 
    impossible. So the primitive below react to changes on 
    the c filterModalCanBeOpened.
    </p>    
    c.primitive: {{c.filterModalCanBeOpened}} 

</div>

angular.module('App', [])
    .directive('theDirective', function () {
    return {
        restrict: 'AE',
        scope: {
            primitiveParam: '='            
        },
        template: '<div>primitiveParam from directive: {{ primitiveParam }}; </div>',
        link: function (scope) {            
        }
    };
})
.controller('Ctrl', [function () {
    this.filterModalCanBeOpened = true;
}]);