javascript - showing - ng-include example html

Perder alcance al usar ng-include

Question

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

HTML casero:

<div ng-include src="views.partial1"></div>

HTML partial1 :

<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 función addLine $scope.lineText undefined está undefined , esto puede resolverse agregando ng-controller="HomeCtrl" a partial1.html , pero hace que el controlador se llame dos veces. ¿Que me estoy perdiendo aqui?

Answer 1

Como se menciona @Renan, ng-include crea un nuevo alcance para el niño. Este ámbito hereda de manera prototípica (ver líneas discontinuas a continuación) desde el alcance de HomeCtrl. ng-model="lineText" realmente crea una propiedad de ámbito primitivo en el ámbito hijo, no en el ámbito de HomeCtrl. Este ámbito hijo no es accesible para el alcance principal / HomeCtrl:

Para almacenar lo que el usuario tipeó 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í:

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

Fiddle .

Alternativas:

• define una propiedad de objeto en $ scope de HomeCtrl, y usa eso en el parcial: ng-model="someObj.lineText ; fiddle
• no recomendado, esto es más un hack: use $ parent en la propiedad partial para crear / acceder a lineText en el alcance de HomeCtrl $: ng-model="$parent.lineText" ; fiddle

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

No recomiendo usar this en la función addLine (). Se vuelve mucho menos claro a qué alcance se accede / manipula.

Answer 2

En lugar de usar this como lo sugiere la respuesta aceptada, use $parent en $parent lugar. Entonces en tu partial1.html tendrá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 en ng-include u otras directivas, consulte esto: https://github.com/angular/angular.js/wiki/ ng-include

Answer 3

Esto se debe a ng-include que crea un nuevo ámbito hijo, por lo que $scope.lineText no se cambia. Creo que this refiere al alcance actual, por this.lineText que se debe establecer this.lineText .

Answer 4

He descubierto cómo solucionar este problema sin mezclar los datos principales y secundarios. Establezca ng-if en el elemento ng-include y establézcalo 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, configure show en true . El ng-include copiará en este momento el conjunto de datos en su alcance y lo establecerá en su subámbito.

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

Max