Втрата обсягу при використанні ng-include

У мене є цей модуль маршрутів:

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:

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

У addLineфункції $scope.lineTextє undefined, це можна вирішити, додавши ng-controller="HomeCtrl"до partial1.html, однак це призводить до виклику контролера двічі. Що я тут пропускаю?

Це через те, ng-includeщо створює нову область дитини, тому $scope.lineTextїї не змінюють. Я думаю, що це thisстосується нинішнього обсягу, тому його this.lineTextслід встановити.

Як згадував @Renan, ng-include створює нову область дитини. Цей діапазон прототипічно успадковує (див. Пунктирні рядки нижче) від області HomeCtrl. ng-model="lineText"насправді створює примітивне властивість області для дочірньої області, а не області HomeCtrl. Ця дочірня область недоступна для батьківського / HomeCtrl сфери:

Щоб зберігати те, що користувач вводив у масив $ range.lines HomeCtrl, я пропоную вам передати значення функції addLine:

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

Крім того, оскільки lineText належить областю ngInclude / частковому, я вважаю, що він повинен нести відповідальність за його очищення:

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

Функція addLine () таким чином стане:

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

Скрипка .

Альтернативи:

• визначити властивість об'єкта на $ обсязі HomeCtrl, і використовувати це в парціальний: ng-model="someObj.lineText; скрипка
• не рекомендується, це більше хака: використання $ батька в парціальному для створення / доступу до lineTextвласності на HomeCtrl $ обсязі:   ng-model="$parent.lineText"; скрипка

Трохи потрібно пояснити, чому працюють вищезгадані дві альтернативи, але тут це повністю пояснено: Які нюанси обсягу спадкового прототипічного / прототипічного успадкування в AngularJS?

Я не рекомендую використовувати thisу функції addLine (). Стає набагато менш зрозумілим, до якої сфери доступу / маніпулювання.

Замість використання, thisяк пропонує прийнята відповідь, використовуйте $parentзамість цього. Отже, у вашому partial1.html:

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

Якщо ви хочете дізнатися більше про сферу застосування в ng-includeінших директивах, перевірте це: https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include

Я зрозумів, як вирішити цю проблему, не змішуючи дані батьків та підрозділів. Встановіть елемент ng-ifна ng-includeелемент і встановіть його в змінну області. Наприклад :

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

Коли ви встановите всі необхідні дані у своєму контролері у своєму контролері, тоді встановіть показ true. У ng-includeцей момент скопіюється набір даних у вашому обсязі та встановиться у вашому підрозділі.

Основне правило полягає в тому, щоб зменшити дані про область застосування глибше, ніж у інших випадках.

Макс