Mất phạm vi khi sử dụng ng-bao gồm

Tôi có các tuyến mô-đun này:

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

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

Trong addLinehàm $scope.lineTextlà undefined, điều này có thể được giải quyết bằng cách thêm ng-controller="HomeCtrl"vào partial1.html, tuy nhiên nó làm cho bộ điều khiển được gọi hai lần. Tôi đang thiếu gì ở đây?

Điều này là do ng-includetạo ra một phạm vi con mới, do đó $scope.lineTextkhông thay đổi. Tôi nghĩ rằng thisđề cập đến phạm vi hiện tại, vì vậy this.lineTextnên được đặt.

Như @Renan đã đề cập, ng-include tạo ra một phạm vi con mới. Phạm vi này kế thừa nguyên mẫu (xem các đường đứt nét bên dưới) từ phạm vi HomeCtrl. ng-model="lineText"thực sự tạo ra một thuộc tính phạm vi nguyên thủy trên phạm vi con, không phải phạm vi của HomeCtrl. Phạm vi con này không thể truy cập được trong phạm vi cha / HomeCtrl:

Để lưu trữ những gì người dùng đã nhập vào mảng $ scope.lines của HomeCtrl, tôi khuyên bạn nên chuyển giá trị cho hàm addLine:

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

Ngoài ra, do lineText được sở hữu bởi phạm vi / một phần của ngInclude, tôi cảm thấy cần có trách nhiệm xóa nó:

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

Hàm addLine () do đó sẽ trở thành:

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

Fiddle .

Lựa chọn thay thế:

• định nghĩa một thuộc tính đối tượng trên phạm vi $ của HomeCtrl và sử dụng thuộc tính đó trong phần : ng-model="someObj.lineText; vĩ cầm
• không được đề xuất, đây là một vụ hack: sử dụng $ cha mẹ một phần để tạo / truy cập một thuộc lineTexttính trên phạm vi HomeCtrl $ :   ng-model="$parent.lineText"; vĩ cầm

Có một chút liên quan để giải thích tại sao hai lựa chọn thay thế ở trên hoạt động, nhưng nó được giải thích đầy đủ ở đây: các sắc thái của sự thừa kế nguyên mẫu / nguyên mẫu trong AngularJS là gì?

Tôi không khuyên bạn nên sử dụng thishàm addLine (). Nó trở nên ít rõ ràng hơn phạm vi nào đang được truy cập / thao tác.

Thay vì sử dụng thisnhư câu trả lời được chấp nhận, hãy sử dụng $parentthay thế. Vì vậy, trong partial1.htmlbạn sẽ có:

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

Nếu bạn muốn tìm hiểu thêm về phạm vi trong ng-includehoặc các chỉ thị khác, hãy xem phần này: https://github.com/angular/angular.js/wiki/Under Hiểu-Sames # ng-include

Tôi đã tìm ra cách khắc phục vấn đề này mà không trộn lẫn dữ liệu phạm vi phụ và phụ. Đặt a ng-iftrên ng-includephần tử và đặt thành biến phạm vi. Ví dụ :

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

Trong bộ điều khiển của bạn, khi bạn đã đặt tất cả dữ liệu bạn cần trong phạm vi phụ của mình, sau đó đặt hiển thị thành true. Các ng-includesẽ sao chép tại thời điểm này bộ dữ liệu trong phạm vi của bạn và đặt nó trong phạm vi tiểu của bạn.

Nguyên tắc chung là giảm dữ liệu phạm vi sâu hơn phạm vi, nếu không bạn sẽ gặp tình huống này.

Tối đa