Perder escopo ao usar ng-include

Eu tenho este módulo de rotas:

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 inicial:

<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 = "";
    };
...
}

Na addLinefunção $scope.lineTexté undefined, isso pode ser resolvido através da adição ng-controller="HomeCtrl"de partial1.html, no entanto, faz com que o controlador a ser chamado duas vezes. O que estou perdendo aqui?

Isso ocorre porque ng-includecria um novo escopo filho, portanto $scope.lineTextnão é alterado. Eu acho que isso thisse refere ao escopo atual, então this.lineTextdeve ser definido.

Como o @Renan mencionou, o ng-include cria um novo escopo filho. Esse escopo herda prototipicamente (consulte linhas tracejadas abaixo) do escopo HomeCtrl. ng-model="lineText"na verdade, cria uma propriedade de escopo primitivo no escopo filho, não no escopo do HomeCtrl. Este escopo filho não está acessível para o escopo pai / HomeCtrl:

Para armazenar o que o usuário digitou na matriz $ scope.lines do HomeCtrl, sugiro que você passe o valor para a função addLine:

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

Além disso, como o lineText pertence ao escopo ngInclude / parcial, acho que ele deve ser responsável por limpá-lo:

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

A função addLine () se tornaria assim:

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

Violino .

Alternativas:

• definir uma propriedade do objeto em $ âmbito do HomeCtrl, e usar isso na parcial: ng-model="someObj.lineText; violino
• não recomendado, este é mais um truque: use $ pai na parcial para criar / acesso a lineTextpropriedade no $ âmbito HomeCtrl:   ng-model="$parent.lineText"; violino

É um pouco complicado explicar por que as duas alternativas acima funcionam, mas é totalmente explicado aqui: Quais são as nuances da herança prototípica / prototípica do escopo no AngularJS?

Eu não recomendo usar thisna função addLine (). Torna-se muito menos claro qual escopo está sendo acessado / manipulado.

Em vez de usar thiscomo a resposta aceita sugere, use em seu $parentlugar. Então no seu partial1.htmlvocê terá:

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

Se você quiser saber mais sobre o escopo ng-includeou outras diretivas, verifique isso: https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include

Eu descobri como solucionar esse problema sem misturar dados pai e sub escopo. Defina um ng-ifno ng-includeelemento e defina-o como uma variável de escopo. Por exemplo :

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

No seu controlador, quando você definir todos os dados necessários no seu sub escopo, defina show como true. O ng-includecopiará, neste momento, o conjunto de dados em seu alcance e fixando-o em seu sub escopo.

A regra geral é reduzir os dados do escopo mais profundamente do escopo, caso contrário, você terá essa situação.

Máx.