☰

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

tag-icon • tag-icon javascript html angularjs angularjs-scope angularjs-ng-include
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>

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追加することで解決できますが、コントローラが 2 回呼び出されることになります。ここで何が足りないのでしょうか?ng-controller="HomeCtrl"partial1.html

ベストアンサー1

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

ng-include スコープ

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

上記の 2 つの代替案が機能する理由を説明するのは少し複雑ですが、ここで詳しく説明します。AngularJS のスコープ プロトタイプ / プロトタイプ継承のニュアンスは何ですか?

thisaddLine() 関数内での使用はお勧めしません。どのスコープがアクセス/操作されているかが不明瞭になります。

おすすめ記事