javascript - 使用ng-include时失去范围(Losing scope when using ng-include)

Question

I have this module routes:

(我有这个模块路线：)

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

Home HTML:

(主页HTML：)

<div ng-include src="views.partial1"></div>

partial1 HTML:

(partial1 HTML：)

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

HomeCtrl :

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

In the addLine function $scope.lineText is undefined , this can be resolved by adding ng-controller="HomeCtrl" to partial1.html , however it causes the controller to be called twice.

(在addLine函数中， $scope.lineText是undefined ，这可以通过将ng-controller="HomeCtrl"到partial1.html来partial1.html ，但是它会导致控制器被调用两次。)

What am I missing here?

(我在这里错过了什么？)

  ask by Shlomi Schwartz translate from so

Answer 1

As @Renan mentioned, ng-include creates a new child scope.

(正如@Renan所提??到的，ng-include创建了一个新的子范围。)

This scope prototypically inherits (see dashed lines below) from the HomeCtrl scope.

(此范围从HomeCtrl范围原型继承（参见下面的虚线）。)

ng-model="lineText" actually creates a primitive scope property on the child scope, not HomeCtrl's scope.

(ng-model="lineText"实际上在子范围上创建了一个原始范围属性，而不是HomeCtrl的范围。)

This child scope is not accessible to the parent/HomeCtrl scope:

(父/ HomeCtrl范围无法访问此子范围：)

To store what the user typed into HomeCtrl's $scope.lines array, I suggest you pass the value to the addLine function:

(要存储用户键入HomeCtrl的$ scope.lines数组的内容，我建议您将值传递给addLine函数：)

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

In addition, since lineText is owned by the ngInclude scope/partial, I feel it should be responsible for clearing it:

(另外，由于lineText归ngInclude范围/部分所有，我觉得应该负责清除它：)

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

Function addLine() would thus become:

(函数addLine（）因此将变为：)

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

Fiddle .

(小提琴 。)

Alternatives:

(备择方案：)

• define an object property on HomeCtrl's $scope, and use that in the partial: ng-model="someObj.lineText ; fiddle

  (在HomeCtrl的$ scope上定义一个对象属性，并在partial中使用它： ng-model="someObj.lineText ; fiddle)

• not recommended, this is more of a hack: use $parent in the partial to create/access a lineText property on the HomeCtrl $scope: ng-model="$parent.lineText" ;

  (不推荐的，这更是一个劈的：在局部使用$父创建/访问lineText上HomeCtrl $范围属性： ng-model="$parent.lineText" ;)

  fiddle

  (小提琴)

It is a bit involved to explain why the above two alternatives work, but it is fully explained here: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

(有一点涉及到解释为什么上述两个替代方案有效，但这里有充分的解释： AngularJS中范围原型/原型继承的细微差别是什么？)

I don't recommend using this in the addLine() function.

(我不推荐使用this在addLine（）函数。)

It becomes much less clear which scope is being accessed/manipulated.

(对于访问/操纵哪个范围变得不太清楚。)