181

我有这个模块路线：

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.lineTextis 中undefined，这可以通过添加ng-controller="HomeCtrl"to来解决partial1.html，但是它会导致控制器被调用两次。我在这里想念什么？

4

4 回答 4

259

正如@Renan 提到的， ng-include 创建了一个新的子范围。这个范围原型继承自 HomeCtrl 范围（见下面的虚线）。 ng-model="lineText"实际上在子作用域上创建了一个原始作用域属性，而不是 HomeCtrl 的作用域。父/HomeCtrl 范围无法访问此子范围：

ng-包含范围

要将用户键入的内容存储到 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
    });
};

小提琴。

备择方案：

  • 在 HomeCtrl 的 $scope 上定义一个对象属性，并在部分中使用它ng-model="someObj.lineText：小提琴
  • 不推荐，这更像是一种技巧：在部分中使用 $parent 来创建/访问lineTextHomeCtrl $scope: 上的属性  ng-model="$parent.lineText"；小提琴

解释为什么上述两种替代方案起作用有点复杂，但在这里完全解释了：AngularJS 中范围原型/原型继承的细微差别是什么？

我不建议this在 addLine() 函数中使用。正在访问/操作哪个范围变得不太清楚。

于 2013-01-03T20:02:56.813 回答
83

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

于 2012-07-10T15:49:01.773 回答
35

不要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

于 2014-12-05T05:55:10.687 回答
4

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

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

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

经验法则是在范围更深的范围内减少范围数据，否则您会遇到这种情况。

最大限度

于 2014-12-04T13:39:28.647 回答