ng-include 사용 시 범위 상실

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>

partial1HTML:

<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단, 이로 인해 컨트롤러가 2회 호출됩니다.내가 뭘 놓쳤지?

@Renan에서 설명한 바와 같이 ng-include는 새로운 자 스코프를 만듭니다.이 스코프는 HomeCtrl 스코프에서 프로토타입으로 상속합니다(아래 점선 참조). ng-model="lineText"실제로 HomeCtrl의 범위가 아닌 하위 범위에 원시 범위 속성을 만듭니다.이 자식 범위는 부모/HomeCtrl 범위에서 액세스할 수 없습니다.

사용자가 HomeCtrl의 $scope.lines 배열에 입력한 내용을 저장하려면 addLine 함수에 값을 전달하는 것이 좋습니다.

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

또한 lineText는 ngInclude scope/partial이 소유하고 있기 때문에 clearing은 lineText가 담당해야 한다고 생각합니다.

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

addLine() 함수는 다음과 같습니다.

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

만지작거리다.

다른 방법:

• HomeCtrl의 $scope에서 오브젝트 속성을 정의하고 다음 중 일부를 사용합니다.ng-model="someObj.lineText만지작거리다
• 권장되지 않습니다. 이것은 해킹에 가깝습니다: $parent를 부분적인 방법으로 사용하여lineTextHomeCtrl $scope 속성:ng-model="$parent.lineText"만지작거리다

위의 두 가지 대안이 작동하는 이유를 설명하는 것은 다소 복잡하지만, 여기서는 충분히 설명합니다.AngularJS에서 스코프 프로토타입/프로토타입 상속의 뉘앙스는 무엇입니까?

를 사용하는 것은 추천하지 않습니다.thisaddLine() 함수로 지정합니다.액세스/조작되는 범위가 훨씬 명확하지 않습니다.

그 이유는ng-include새로운 아이 스코프가 생성됩니다.$scope.lineText변하지 않습니다.그런 것 같아요this현재 스코프를 참조하고 있습니다.this.lineText설정할 필요가 있습니다.

사용하는 대신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

상위 및 하위 범위의 데이터를 혼재시키지 않고 이 문제를 해결하는 방법을 알아냈습니다.a를 설정하다ng-if을 타고ng-includescope 변수로 설정합니다.예를 들어 다음과 같습니다.

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

컨트롤러에서 서브스코프에서 필요한 모든 데이터를 설정한 후 show를 다음과 같이 설정합니다.true.그ng-include이 시점에서 스코프의 데이터 세트가 카피되어 서브 스코프에 설정됩니다.

경험의 법칙은 범위 데이터의 깊이를 줄이는 것입니다.그렇지 않으면 이 상황이 발생합니다.

맥스.

언급URL : https://stackoverflow.com/questions/11412410/losing-scope-when-using-ng-include