使用时失去范围NG-包括使用时失去范围NG-包括(Losing scope when using 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>

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 ，但它会导致控制器被调用两次。 我缺少的是在这里吗？

Answer 1:

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

Answer 2:

作为@Renan提到，NG-包括创建新的子范围。 这个范围prototypically继承（见下文虚线）从HomeCtrl范围。 ng-model="lineText"实际创建的子范围，不HomeCtrl的范围原始scope属性。 这孩子范围不是父/ HomeCtrl范围访问：

要存储什么用户键入到H​​omeCtrl的$ 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
    });
};

小提琴 。

备择方案：

• 定义上HomeCtrl的$范围的对象属性，和使用，在所述部分： ng-model="someObj.lineText ; 小提琴
• 不推荐的，这更是一个劈的：在局部使用$父创建/访问lineText上HomeCtrl $范围属性： ng-model="$parent.lineText" ; 小提琴

这是有点麻烦，解释为什么上面的两个备选方案的工作，但它是完全可以解释在这里： 什么是范围原型的细微差别AngularJS /原型继承？

我不推荐使用this在addLine（）函数。 它变得更清楚，其范围被访问/操纵。

Answer 3:

而不是使用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

Answer 4:

我已经想通了如何解决这个问题，而混合父和子范围的数据。 设置一个ng-if在所述ng-include元素，并将其设定为一个范围可变。 例如 ：

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

在你的控制器，当您将所有你在子范围内所需要的数据，然后将秀true 。 该ng-include将在这一刻中的数据复制在你的范围内设置，并设置它在你的子范围。

经验法则是减少数据的范围更深范围的，否则你有这种情况。

马克斯

文章来源: Losing scope when using ng-include