Utrata zasięgu podczas używania ng-include

Mam ten moduł tras:

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

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

W addLinefunkcja $scope.lineTextjest undefined, to może być rozwiązany poprzez dodanie ng-controller="HomeCtrl"do partial1.html, powoduje to jednak kontroler na miano dwukrotnie. Czego tu brakuje?

Jest to spowodowane ng-includetym, że tworzy nowy zakres potomny, więc $scope.lineTextnie ulega zmianie. Myślę, że thisodnosi się to do obecnego zakresu, więc this.lineTextnależy je ustawić.

Jak wspomniano @Renan, ng-include tworzy nowy zakres potomny. Zakres ten prototypowo dziedziczy (patrz linie przerywane poniżej) z zakresu HomeCtrl. ng-model="lineText"faktycznie tworzy prymitywną właściwość zakresu w zakresie potomnym, a nie w zakresie HomeCtrl. Ten zakres potomny jest niedostępny dla nadrzędnego / HomeCtrl:

Aby zapisać to, co użytkownik wpisał do tablicy $ scope.lines HomeCtrl, sugeruję przekazać wartość do funkcji addLine:

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

Ponadto, ponieważ lineText jest własnością ngInclude scope / częściowo, uważam, że powinien on być odpowiedzialny za jego wyczyszczenie:

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

Funkcja addLine () stałaby się w ten sposób:

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

Fiddle .

Alternatywy:

• określić właściwości obiektu na HomeCtrl za $ zakresu i użyć jej w częściowej: ng-model="someObj.lineText; skrzypce
• nie polecam, to jest bardziej Hack: użyć $ rodziców w częściowym do tworzenia / dostęp do lineTextnieruchomości na HomeCtrl $ zakresie:   ng-model="$parent.lineText"; skrzypce

Nieco wyjaśniono, dlaczego powyższe dwie alternatywy działają, ale zostało to w pełni wyjaśnione tutaj: jakie są niuanse zakresu prototypowego / prototypowego dziedziczenia w AngularJS?

Nie polecam używania thisw funkcji addLine (). Staje się znacznie mniej jasne, który zakres jest dostępny / manipulowany.

Zamiast używać thiszgodnie z sugerowaną odpowiedzią, użyj $parentzamiast tego. Więc w twoim partial1.htmlbędziesz miał:

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

Jeśli chcesz dowiedzieć się więcej o zakresie ng-includelub innych dyrektywach, sprawdź to: https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include

Zrozumiałem, jak obejść ten problem bez mieszania danych rodzica i podzakresu. Ustaw a ng-ifna ng-includeelemencie i ustaw zmienną zasięgu. Na przykład :

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

W swoim kontrolerze, po ustawieniu wszystkich potrzebnych danych w swoim zakresie podrzędnym, ustaw opcję show na true. W ng-includetym momencie skopiuje zestaw danych w twoim zakresie i ustawi go w twoim zakresie podrzędnym.

Zasadą jest ograniczenie danych zakresu głębiej, w przeciwnym razie masz taką sytuację.

Max