Perder alcance cuando se usa ng-include

Tengo este módulo de rutas:

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'});
}]);

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

En la addLinefunción $scope.lineTextes undefined, esto se puede resolver agregando ng-controller="HomeCtrl"a partial1.html, sin embargo, hace que se llame dos veces al controlador. ¿Que me estoy perdiendo aqui?

Esto se debe a ng-includeque crea un nuevo ámbito secundario, por $scope.lineTextlo que no se modifica. Creo que eso se thisrefiere al alcance actual, por lo que this.lineTextdebe establecerse.

Como @Renan mencionó, ng-include crea un nuevo ámbito secundario. Este alcance hereda prototípicamente (ver líneas discontinuas a continuación) del alcance HomeCtrl. ng-model="lineText"en realidad crea una propiedad de ámbito primitiva en el ámbito secundario, no en el ámbito de HomeCtrl. Este ámbito secundario no es accesible para el ámbito primario / HomeCtrl:

Para almacenar lo que el usuario escribió en la matriz $ scope.lines de HomeCtrl, le sugiero que pase el valor a la función addLine:

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

Además, dado que lineText es propiedad de ngInclude scope / partial, creo que debería ser responsable de borrarlo:

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

La función addLine () se convertiría así en:

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

Violín .

Alternativas:

• defina una propiedad de objeto en $ alcance de HomeCtrl y utilícela en el parcial: ng-model="someObj.lineText ; violín
• no recomendado, esto es más un truco: use $ parent en el parcial para crear / acceder a una lineTextpropiedad en el alcance $ HomeCtrl:  ng-model="$parent.lineText" ; violín

Es un poco complicado explicar por qué funcionan las dos alternativas anteriores, pero aquí se explica completamente: ¿Cuáles son los matices del alcance prototípico / herencia prototípica en AngularJS?

No recomiendo usar thisen la función addLine (). Se vuelve mucho menos claro a qué alcance se está accediendo / manipulando.

En lugar de usar thiscomo sugiere la respuesta aceptada, use $parenten su lugar. Entonces en tu partial1.htmltendrás:

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

Si desea obtener más información sobre el alcance ng-includeu otras directivas, consulte esto: https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include

He descubierto cómo solucionar este problema sin mezclar datos primarios y secundarios. Establezca a ng-ifen el ng-includeelemento y configúrelo en una variable de ámbito. Por ejemplo :

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

En su controlador, cuando haya configurado todos los datos que necesita en su sub ámbito, luego configure show en true. En ng-includeeste momento, copiará el conjunto de datos en su ámbito y lo establecerá en su sub ámbito.

La regla general es reducir los datos del alcance más profundamente, de lo contrario, tiene esta situación.

Max