Директивы Изолированные Область применения не работает должным образом вместе с вложенным видом?(AngularJS / UI маршрутизатор)

Question

Я использую UI-маршрутизатор в проекте Angularjs, где у меня есть вложенный вид, который содержит пользовательскую директиву. Эта директива оказывает поле ввода (позволяет сказать фильтр-поле), а его значение следует синхронизировать с помощью области контроллера.

---

Это хорошо работает для этой директивы, когда представление / состояние не вложено:

jsfiddle / не вложенный / работающий, как и ожидалось

var myApp = angular.module('myApp', ['ui.router', 'myComponents'])
    .config(['$stateProvider', function ($stateProvider) {
        $stateProvider.
            state('home', {
                url: '',
                template: '<my-filter text-filter="theFilter"></my-filter><button ng-click="inspect()">inspect</button>{{ theFilter |json}}',
                controller: 'myController'
            });
    }]);

var components = angular.module('myComponents', []);

components.directive('myFilter', [function () {
    return {
        restrict: 'E',
        template: '<input type="text" name="filter" ng-model="textFilter">',
        scope: {
            textFilter: '='
        }
    };
}]);

components.controller('myController', ['$scope', function ($scope) {
    $scope.theFilter = 'initial filter';

    $scope.inspect = function () {
        alert($scope.theFilter);
    }
}]);

.

Вид:

<div ng-app="myApp">
    <div ui-View></div>
</div>

.

Когда я изменяю текст поля ввода, он отражается на прицелах ...

---

... Но когда я гнежу свой вид / состояние, значение на область сохраняет свое начальное значение, но я ожидаю, что он изменяется в соответствии с значением поля ввода при перезаписи.

var myApp = angular.module('myApp', ['ui.router', 'myComponents'])
    .config(['$stateProvider', function ($stateProvider) {
        $stateProvider.
            state('home', {
                abstract: true,
                url: '',
                template: 'Nested View:<div ui-view></div>',
                controller: 'myController'
            }).
            state('home.detail', {
                url: '',
                template: '<my-filter text-filter="theFilter"></my-filter><button ng-click="inspect()">inspect</button>{{ theFilter |json}}'
            });;
    }]);


var components = angular.module('myComponents', []);

components.directive('myFilter', [function () {
    return {
        restrict: 'E',
        template: '<input type="text" name="filter" ng-model="textFilter">',
        scope: {
            textFilter: '='
        }
    };
}]);

components.controller('myController', ['$scope', function ($scope) {
    $scope.theFilter = 'initial filter';

    $scope.inspect = function () {
        alert($scope.theFilter);
    }
}]);

.

Вид:

<div ng-app="myApp" >
    <div ui-View></div>
</div>

.

Здесь текст на прицелах (см. Контроллер) остается прежним.

Любая идея, как я могу получить тот же результат с вложенным видом, как в первом примере?

PS: Директива должна оставаться многоразовой

jsfiddle / needed / не работает, как ожидалось,

Answer 1

Это связано с общим вопросом.Как уже упоминалось в этом видео angular js - лучшая практика (29:19) и объяснена здесь: вложенные природы в угловых js

"Всякий раз, когда у вас есть NG-модель, там должен быть точка там где-то. Если у вас нет точки, вы делаете это неправильно."

Так что контроллер должен создавать объект:

components.controller('myController', ['$scope', function($scope) {

    // here theFilter is an object
    // with property value
    $scope.theFilter =  { value : 'initial filter'};

    $scope.inspect = function() {
        alert($scope.theFilter.value);
    }    
}]);

.

и шаблон должен работать с объектом, имеющим свойство value:

components.directive('myFilter', [function() {
    return {
        restrict: 'E',
        template: '<input type="text" name="filter" ng-model="textFilter.value">',
        scope: {
            textFilter: '='             
        }
    };          
}]);

.

Накопленный jsfiddle