使用 n- 包含时丢失范围

我有这个模块的路线:

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>

HTML:

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

返回文章页面

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来解决，但是它会导致控制器被调用两次。我错过了什么？

113949 次浏览
小开
最佳答案

这是因为 ng-include创建了一个新的子范围，所以 $scope.lineText没有改变。我认为 this指的是当前的范围，所以应该设置 this.lineText。

小开

正如@Renan 提到的，ng-include 创建了一个新的子范围。这个作用域通常从 HomeCtrl 作用域继承(参见下面的虚线)。ng-model="lineText"实际上在子范围上创建了一个基本范围属性，而不是 HomeCtrl 的范围。此子作用域不能访问父/HomeCtrl 作用域:

ng-include scope

要将用户输入的内容存储到 HomeCtrl 的 $scope.lines 数组中，我建议将值传递给 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
});
};

小提琴。

备选方案:

解释上述两种选择的原因有点复杂，但这里已经充分解释了: AngularJS 中范围原型/原型继承的细微差别是什么？

我不建议在 addLine ()函数中使用 this。

小开

我已经知道如何在不混合父范围和子范围数据的情况下解决这个问题。 在 ng-include元素上设置 ng-if，并将其设置为范围变量。 例如:

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

在您的控制器中，当您已经在子范围中设置了所有需要的数据，然后将 show 设置为 true。此时，ng-include将复制您范围内的数据集，并将其设置在您的子范围内。

经验法则是，范围数据越小，范围越深，否则就会出现这种情况。

麦克斯

小开

不要像已被接受的答案建议的那样使用 this，而是使用 $parent:

<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


提交答案