2

パーシャルをクリーンアップするために、最近、いくつかのグローバル メニューを別のテンプレートに移動し、それらを必要とするビューに含めるようにしました。メニュー (検索バーを含む) はグローバルなので、メニューの状態などを追跡するサービスを作成しました。

問題は、インクルードを開始した後に何かおかしなことが起こったことです。

ビューの HTML (ジェイド)

div(ng-controller='HeroUnitCtrl', ng-include src='heroTemplate')
div(ng-controller='MainSearchBarCtrl', ng-include src='searchBarTemplate')

div.row-fluid
    div.span12
        table.table.table-striped.table-bordered
            tr
                th
                    a(ng-click='setOrder("id")') ID#
                th
                    a(ng-click='setOrder("client.name")') Kunde
                th
                    a(ng-click='setOrder("technician.name")') Tekniker
                th
                    a(ng-click='setOrder("createdAt")') Opprettet
                th
                    a(ng-click='setOrder("statusString")') Status

            tr(ng-repeat='record in records | orderBy:orderProp | filter:searchBar')
                td
                    a(ng-href='#/records/show/{{record.id}}') {{record.id}}
                td {{record.client.name}}
                td {{record.technician.name}}
                td {{record.createdAt}}
                td {{record.statusString}}

HTML (ジェイド) searchBarTemplate

input#searchField.input-xxlarge(type='text', placeholder='placeholder', ng-change='searchBarUpdated()', ng-model='searchBar')

いまいちよくわからないところまで、

MainSearchBarCtrl

function MainSearchBarCtrl(MainSearchBarService, $scope, $location) {
    $scope.searchBarTemplate = 'partials/main-searchbar';
    $scope.searchBar = 'Hello World!';

    $scope.searchBarUpdated = function() {
        console.log('Search bar update: ' + $scope.searchBar);
        MainSearchBarService.searchBarUpdated($scope.searchBar);
    }   
}

最初のsearchBarの値は、予想どおり「Hello World」です。ただし、テキストを追加すると、「Hello World」のみが出力されます。または、テキストを置き換えると、undefined が出力されます。バインディングが壊れているようですが、なぜこれが起こっているのかわかりません。言及する価値があるのは、検索バーを別のテンプレートに移動する前は、これは当てはまらなかったということです.

どんな助けでも大歓迎です。

4

2 に答える 2

9

上記のコメントで説明したようにng-include、新しい子スコープを作成します。そのため、searchBarTemplate で使用すると、子スコープにng-model="searchBar"新しいプロパティが作成され、同じ名前searchBarの親プロパティが非表示/シャドウになります。searchBar

コントローラーで、オブジェクトを定義します。

$scope.obj = {searchBar: 'Hello World!};

そして、使用します

ng-model="obj.searchBar"

あなたのテンプレートで。(プリミティブの代わりに) オブジェクトが使用される場合、子スコープは新しいプロパティを作成しません。むしろ、JavaScript プロトタイプ継承の仕組みにより、子スコープは親スコープのプロパティを見つけます。

https://stackoverflow.com/a/14146317/215945も参照してください。これには、子スコープと親スコープを示す図と、プリミティブが使用されている場合に子プロパティが親プロパティを非表示/シャドウにする方法があります。

$parent使用は別のオプションですが、「ベスト プラクティス」ではないことに注意してください。

于 2013-03-29T15:41:35.583 に答える
0

含まれているテンプレートで $scope の代わりに $parent を使用してみてください

于 2013-03-29T17:30:19.540 に答える