1. ホーム
  2. javascript

[解決済み] ng-includeを使用するとスコープが失われる

2022-04-20 12:02:52

質問

このモジュールのルートがあります。

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

解決方法は?

この原因は ng-include は新しい子スコープを作成するので $scope.lineText は変更されない。私が思うに this は現在のスコープを参照しているので this.lineText を設定する必要があります。