使用 ng-包含时失去作用域

javascript angularjs html angularjs-scope angularjs-ng-include

2022-08-30 01:49:50

我有这个模块路由：

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网页：

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

在函数 is 中，这可以通过添加来解决，但是它会导致控制器被调用两次。我在这里错过了什么？addLine$scope.lineTextundefinedng-controller="HomeCtrl"partial1.html

答案 1

如前所述@Renan，ng-include 会创建一个新的子作用域。此作用域通常从 HomeCtrl 作用域继承（请参阅下面的虚线）。实际上在子作用域上创建了一个基元作用域属性，而不是 HomeCtrl 的作用域。父/HomeCtrl 作用域无法访问此子作用域：ng-model="lineText"

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

小提琴。

选择：

在 HomeCtrl 的$scope上定义一个对象属性，并在部分： ;小提琴ng-model="someObj.lineText
不建议，这更像是一个黑客：在部分使用$parent在HomeCtrl上创建/访问属性$scope：;小提琴lineTextng-model="$parent.lineText"

解释为什么上述两种选择有效有点复杂，但在这里得到了充分的解释：AngularJS中范围原型/原型继承的细微差别是什么？

我不建议在addLine（）函数中使用。访问/操纵哪个范围变得不那么清楚。this

答案 2

这是因为它会创建一个新的子范围，因此不会更改。我认为这是指当前的范围，因此应该设置。ng-include$scope.lineTextthisthis.lineText