Ng-include kullanırken kapsamı kaybetme

Bu modül yolları var:

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

Ev HTML'si:

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

In addLinefonksiyonu $scope.lineTextolduğunu undefined, bu ekleyerek çözülebilir ng-controller="HomeCtrl"için partial1.htmlancak kontrolör iki kez çağrılacak neden olur. Burada ne eksik?

Bunun nedeni, ng-includeyeni bir çocuk kapsamı oluşturmasıdır, bu nedenle $scope.lineTextdeğişmez. Bunun thismevcut kapsamı ifade ettiğini düşünüyorum , bu yüzden this.lineTextayarlanmalıdır.

@Renan'ın belirttiği gibi, ng-include yeni bir alt kapsam oluşturur. Bu kapsam, HomeCtrl kapsamından prototip olarak miras alır (aşağıdaki kesikli çizgilere bakın). ng-model="lineText"aslında HomeCtrl'in kapsamı değil, alt kapsamda ilkel bir kapsam özelliği oluşturur. Bu alt kapsama üst / HomeCtrl kapsamı tarafından erişilemez:

Kullanıcının HomeCtrl'in $ scope.lines dizisine yazdıklarını saklamak için, değeri addLine işlevine geçirmenizi öneririm:

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

Buna ek olarak, lineText ngInclude kapsamına / kısmi sahip olduğu için, temizlemekten sorumlu olması gerektiğini hissediyorum:

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

AddLine () işlevi şu şekilde olur:

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

Keman .

Alternatifler:

• HomeCtrl'in $ kapsamında bir nesne özelliği tanımlayın ve bunu kısmi olarak kullanın ng-model="someObj.lineText:; Vaktini boşa harcamak
• önerilmez, bu bir hack daha: lineTextHomeCtrl $ kapsamında bir özellik   oluşturmak / erişmek için kısmi olarak $ parent kullanın ng-model="$parent.lineText":; Vaktini boşa harcamak

Yukarıdaki iki alternatifin neden işe yaradığını açıklamak biraz dahil olmakla birlikte, burada tam olarak açıklanmaktadır: AngularJS'de prototip / prototip kalıtım kapsamının nüansları nelerdir?

thisAddLine () işlevinde kullanmanızı önermiyorum. Hangi kapsama erişildiği / manipüle edildiği çok daha az netleşir.

Bunun yerine kullanmanın thiskabul cevap anlaşılacağı gibi, kullanmak $parentyerine. Yani partial1.htmlsizde:

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

Kapsam ng-includeveya diğer yönergeler hakkında daha fazla bilgi edinmek istiyorsanız, şuraya bakın : https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include

Üst ve alt kapsam verilerini karıştırmadan bu soruna geçici bir çözüm bulmak için düşündüm. Bir Set ng-ifüzerinde ng-includeeleman ve bir kapsam değişken olarak ayarlayın. Örneğin :

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

Denetleyicinizde, alt kapsamınızda ihtiyacınız olan tüm verileri ayarladıktan sonra şovu olarak ayarlayın true. ng-includeSenin kapsamında şu anda veri kümesini kopyalayıp alt kapsamı içinde ayarlayacaktır.

Temel kural, kapsam verilerini kapsamın derinliklerine indirmektir, aksi takdirde bu duruma sahipsiniz.

maksimum