Директивы изолированного объема не работают должным образом вместе с вложенными представлениями? (AngularJS / UI Router)
Я использую ui-router в проекте 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: директива должна оставаться многоразовой