ディレクティブ分離スコープネストしたビューと一緒に正しく機能していませんか？（AngularJS / UIルーター）

Question

カスタム指令を含むネストビューを持っているAngularJSプロジェクトでUIルーターを使用しています。 このディレクティブは入力フィールドをレンダリングします（フィルタフィールドを指定してください）、その値はコントローラの範囲と同期している必要があります。

---

このディレクティブは、ビュー/状態がネストされている場合にはうまく機能します。

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 / nested / not unest

Answer 1

これは一般的な問題に関連しています。このビデオで述べたように角度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: '='             
        }
    };          
}]);

.

apenated jsfiddle