Perdre portée lors de l'utilisation de ng-inclure

J'ai ce module routes:

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

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

Dans le addLine fonction $scope.lineText est undefined, ce problème peut être résolu par l'ajout d' ng-controller="HomeCtrl" à partial1.html, cependant, il provoque le contrôleur à être appelé deux fois. Ce qui me manque ici?

InformationsquelleAutor Shlomi Schwartz | 2012-07-10

82

C'est à cause de ng-include qui crée un nouvel enfant, de sorte $scope.lineText n'est pas modifiée. Je pense que this se réfère à l'étendue actuelle, de sorte this.lineText doit être définie.

InformationsquelleAutor Renan Tomal Fernandes
258

Comme @Renan mentionné, ng-inclure crée un nouvel enfant. Ce champ fait hérite (voir les lignes en pointillés ci-dessous) à partir de la HomeCtrl portée. ng-model="lineText" crée en fait une primitive de la portée de propriété sur l'enfant, pas HomeCtrl du champ d'application. Cet enfant n'est pas accessible pour le parent/HomeCtrl portée:

Pour stocker ce que l'utilisateur a tapé dans HomeCtrl de dollars de portée.les lignes de tableau, je vous suggère de passer la valeur de la addLine fonction:
```
 <form ng-submit="addLine(lineText)">
```
En outre, depuis lineText est la propriété de la ngInclude portée/partiel, je pense qu'il devrait être responsable de la compensation d'elle:
```
 <form ng-submit="addLine(lineText); lineText=''">
```
Fonction addLine() deviendrait ainsi:
```
$scope.addLine = function(lineText) {
    $scope.chat.addLine(lineText);
    $scope.lines.push({
        text: lineText
    });
};
```
Violon.

Alternatives:
- définir une propriété de l'objet sur HomeCtrl de dollars de portée, et de l'utiliser dans le partiel: ng-model="someObj.lineText; violon
- pas recommandé, c'est plus un hack: utiliser $parent dans le partiel pour créer ou accéder à un lineText bien sur la HomeCtrl $champ d'application: ng-model="$parent.lineText"; violon
C'est un peu à expliquer pourquoi les deux alternatives de travail, mais il est entièrement expliquée ici: Quelles sont les nuances de portée prototypes /l'héritage par prototype dans AngularJS?

Je ne recommandent pas l'utilisation de this dans le addLine() fonction. Il devient beaucoup moins clair dont la portée est en cours d'accès/manipulé.
- Enfin, je comprends.
- J'ai utilisé objets, mais ils la portée était toujours masqué. J'ai essayé $parent. et il a très bien fonctionné. Pourquoi ne vous considérez que c'est un hack? (Je peux voir, il ajoute de la maintenance, si vous refait votre html)
- Même question @Jess avait , pourquoi est-ce considéré comme un hack ?
- il s'agit essentiellement d'un hack/fragile parce que si vous restructurez votre code HTML, il ne pourrait pas travailler plus. E. g., vous pourriez alors avoir besoin d'utiliser $parent.$parent... pour le faire fonctionner. Mettre une autre manière, à l'aide de $parent fait des hypothèses sur les DOM de la structure.
- J'ai eu le même problème! Merci pour l'explication détaillée
- lien ci-dessus a été changé à ce la Compréhension des Étendues ngInclude. Lire l'intégralité de la page, c'est génial.
- Je vous remercie pour cette. Je pense que cela devrait être la accepté de répondre. À l'aide de this se sent comme un hack Angulaire termes
- Je a va fou à ce sujet. Merci pour l'explication détaillée @MarkRajcok! +1
- C'est une excellente réponse détaillée, mais je les ai tous testés sans succès. J'ai un formulaire avec un input à un contrôleur et le résultat d'un contrôleur doit être considéré sur un autre div. Une fois que j'ai entrer n'importe quelle entrée de la synchronicité sera perdu et je vais avoir une constante 0.00 valeur sur la vue div lorsque l'application est en cours d'exécution.
InformationsquelleAutor Mark Rajcok
32

Au lieu d'utiliser this que l'on a accepté de répondre à l'indique, l'utilisation $parent à la place. Donc, dans votre partial1.htmlvous aurez:
```
<form ng-submit="$parent.addLine()">
    <input type="text" ng-model="$parent.lineText" size="30" placeholder="Type your message here">
</form>
```
Si vous voulez en savoir plus sur la portée de ng-include ou par d'autres directives, check this out: https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include
- Pour le lecteur, il signifie $scope.$parent au lieu de $parent est pas défini selon Angulaire.
- Cette réponse sauve la journée pour moi! Merci beaucoup pour souligner l'utilisation de $parent.
- est de $scope.$parent passer par référence? ou c'est juste une copie de parent?
- est faux. $scope.$parent.lineText est pas défini. $parent.lineText est au travail, cette.lineText ou tout simplement lineText sont aussi de travail
- Son $scope.$parent qui fonctionne pour moi angulaire 1.3.20
- est droit et est donc OMGPOP: dans la directive ou html $scope.$parent est de $parent, si vous référant à l'intérieur d'un contrôleur, il est $portée (ou dans une directive typiquement "champ d'application").$parent... à l'Intérieur du html $champ d'application est déjà passé de sorte qu'il serait ressembler à $parent est juste, mais c'est officiellement $scope.$parent
InformationsquelleAutor ErwinGO
3

J'ai trouvé comment contourner ce problème sans mélange parent et sous la portée de données.
Définir un ng-if sur le ng-include élément et de le définir sur une étendue variable.
Par exemple :
```
<div ng-include="{{ template }}" ng-if="show"/>
```
Dans votre contrôleur, lorsque vous avez réglé toutes les données dont vous avez besoin dans votre sous-champ d'application, puis les mettre de montrer à true. Le ng-include copie en ce moment, l'ensemble de données dans votre périmètre et de le fixer dans votre sous-portée.

La règle de base est de réduire la portée de données plus profond de la portée sont, sinon vous avez cette situation.

Max

InformationsquelleAutor wascou

Vous devez vous connecter pour publier un commentaire.