181

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

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>

partial1HTML：

<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.lineTextisで、これはundefinedに追加ng-controller="HomeCtrl"することで解決できますpartial1.htmlが、コントローラーが2回呼び出されます。ここで何が欠けていますか？

4

4 に答える 4

259

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

ng-スコープを含める

ユーザーが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推奨されませんが、これはハックのようなものです。パーシャルで$ parentを使用して、HomeCtrl$scope  のプロパティを作成/アクセスしますng-model="$parent.lineText"。フィドル

上記の2つの選択肢が機能する理由を説明するのは少し複雑ですが、ここで完全に説明されています：AngularJSのスコープのプロトタイプ/プロトタイプの継承のニュアンスは何ですか？

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

于 2013-01-03T20:02:56.813 に答える
83

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

于 2012-07-10T15:49:01.773 に答える
35

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を確認してください。

于 2014-12-05T05:55:10.687 に答える
4

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

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

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

経験則では、スコープデータをスコープの奥深くまで減らすことです。そうしないと、このような状況になります。

マックス

于 2014-12-04T13:39:28.647 に答える