ng-includeを使用するとスコープが失われる

私はこのモジュールのルートを持っています：

var mainModule = angular.module('lpConnect', []).
    config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/home', {template:'views/home.html', controller:HomeCtrl}).
        when('/admin', {template:'views/admin.html', controller:AdminCtrl}).
        otherwise({redirectTo:'/connect'});
}]);

ホームHTML：

<div ng-include src="views.partial1"></div>

partial1 HTML：

<form ng-submit="addLine()">
    <input type="text" ng-model="lineText" size="30" placeholder="Type your message here">
</form>

HomeCtrl：

function HomeCtrl($scope, $location, $window, $http, Common) {
    ...
    $scope.views = {
        partial1:"views/partial1.html"
    };

    $scope.addLine = function () {
        $scope.chat.addLine($scope.lineText);
        $scope.lines.push({text:$scope.lineText});
        $scope.lineText = "";
    };
...
}

ではaddLine機能が$scope.lineTextありundefined、これは追加することで解決することが可能ng-controller="HomeCtrl"にpartial1.htmlしかし、それはコントローラが二回と呼ばれるようになり、。ここで何が欠けていますか？

これng-includeにより、新しい子スコープが作成されるため、$scope.lineText変更されません。そうだと思いますthisは現在のスコープ参照してとので、this.lineText設定する必要があります。

@Renanが述べたように、ng-includeは新しい子スコープを作成します。このスコープは、典型的にはHomeCtrlスコープから継承します（以下の破線を参照）。 ng-model="lineText"実際には、HomeCtrlのスコープではなく、子スコープにプリミティブスコーププロパティを作成します。この子スコープには、parent / HomeCtrlスコープからアクセスできません。

ユーザーがHomeCtrlの$ scope.lines配列に入力した内容を保存するには、値をaddLine関数に渡すことをお勧めします。

 <form ng-submit="addLine(lineText)">

さらに、lineTextはngIncludeスコープ/パーシャルによって所有されているため、それをクリアする責任があると思います。

 <form ng-submit="addLine(lineText); lineText=''">

したがって、関数addLine（）は次のようになります。

$scope.addLine = function(lineText) {
    $scope.chat.addLine(lineText);
    $scope.lines.push({
        text: lineText
    });
};

フィドル。

代替案：

• HomeCtrlの$ scopeでオブジェクトプロパティを定義し、それをパーシャルで使用しng-model="someObj.lineTextます。バイオリン
• 推奨されません。これはハックの詳細ですlineText。HomeCtrl$ scope：のプロパティ   を作成/アクセスするには、パーシャルで$ parentを使用しますng-model="$parent.lineText"。バイオリン

上記の2つの選択肢が機能する理由を説明するのは少し複雑ですが、ここで完全に説明されています。

thisaddLine（）関数での使用はお勧めしません。どのスコープがアクセス/操作されているかは、はるかに明確ではなくなります。

代わりに使用してのthis受け入れ答えとして、使用することを示唆している$parent代わりに。だからあなたpartial1.htmlにはあなたがいるでしょう：

<form ng-submit="$parent.addLine()">
    <input type="text" ng-model="$parent.lineText" size="30" placeholder="Type your message here">
</form>

スコープng-includeやその他のディレクティブの詳細については、こちらをご覧ください：https : //github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include

親とサブスコープのデータを混在させずにこの問題を回避する方法を見つけました。設定するng-if上でng-includeの要素とスコープ変数に設定します。例えば ​​：

<div ng-include="{{ template }}" ng-if="show"/>

コントローラで、必要なすべてのデータをサブスコープで設定したら、showをに設定しtrueます。ng-includeこの時点で、あなたのスコープ内のデータ・セットをコピーして、サブスコープでそれを設定します。

経験則は、スコープデータをスコープの深さまで減らすことです。それ以外の場合は、この状況になります。

マックス