Javascript 指令隔离作用域不能与嵌套视图一起正常工作？（AngularJS/UI路由器）

我在AngularJS项目中使用ui路由器，其中有一个嵌套视图，其中包含一个自定义指令。 该指令呈现一个输入字段（比如一个过滤器字段），其值应该与控制器的作用域同步

---

当视图/状态未嵌套时，此指令适用：

var myApp=angular.module（'myApp'，['ui.router'，'myComponents']））
.config（['$stateProvider'，函数（$stateProvider）{
$stateProvider。
州（“家”{
url:“”，
模板：“检查{{theFilter | json}}”，
控制器：“myController”
});
}]);
var components=angular.module（'myComponents'，[]）；
指令（'myFilter'，[function（）{
返回{
限制：'E'，
模板：“”，
范围：{
textFilter:“=”
}
};
}]);
components.controller（'myController'，['$scope'，function$scope）{
$scope.theFilter='initial filter'；
$scope.inspect=函数（）{
警报（$scope.theFilter）；
}
}]);

视图：

当我更改输入字段的文本时，它会反映在范围上

---

…但是当我嵌套视图/状态时，作用域上的值保持其初始值，但我希望在覆盖时根据输入字段的值对其进行更改

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);
    }
}]);

var myApp=angular.module（'myApp'，['ui.router'，'myComponents']））
.config（['$stateProvider'，函数（$stateProvider）{
$stateProvider。
州（“家”{
摘要：没错，
url:“”，
模板：“嵌套视图：”，
控制器：“myController”
}).
州（'home.detail'{
url:“”，
模板：“检查{{theFilter | json}”
});;
}]);
var components=angular.module（'myComponents'，[]）；
指令（'myFilter'，[function（）{
返回{
限制：'E'，
模板：“”，
范围：{
textFilter:“=”
}
};
}]);
components.controller（'myController'，['$scope'，function$scope）{
$scope.theFilter='initial filter'；
$scope.inspect=函数（）{
警报（$scope.theFilter）；
}
}]);

视图：

在这里，作用域上的文本（请参见控制器）保持不变

知道如何使用嵌套视图获得与第一个示例相同的结果吗

PS：该指令需要保持可重用性

---

这与一个常见问题有关。如本视频（29:19）所述，并在此处解释：

“当你有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);
    }    
}]);

模板应该与具有属性

值的对象一起使用：

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

components.directive（'myFilter'，[function（）{
返回{
限制：'E'，
模板：“”，
范围：{
textFilter:“=”
}
};          
}]);

升级版

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

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);
    }    
}]);

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