current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 155 down vote favorite
60

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:

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

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, what am I missing here?

share|improve this question
up vote 68 down vote accepted

This is because of ng-include which creates a new child scope, so $scope.lineText isn't changed. I think that this refers to the current scope, so this.lineText should be set.

share|improve this answer
up vote 231 down vote

As @Renan mentioned, ng-include creates a new child scope. This scope prototypically inherits (see dashed lines below) from the HomeCtrl scope. ng-model="lineText" actually creates a primitive scope property on the child scope, not HomeCtrl's scope. This child scope is not accessible to the parent/HomeCtrl scope:

ng-include scope

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

 <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:

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

Function addLine() would thus become:

$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
  • 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"; 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?

I don't recommend using this in the addLine() function. It becomes much less clear which scope is being accessed/manipulated.

share|improve this answer
1  
Finally I understand. – Scott David Tesler Mar 22 '13 at 3:09
1  
Same question @Jess had , why is this considered a hack ? – qbert65536 Dec 20 '13 at 18:29
12  
@qbert65536, it is essentially a hack/fragile because if you restructure your HTML, it might not work anymore. E.g., you might then need to use $parent.$parent... to get it to work. Put another way, using $parent makes assumptions about the DOM structure. – Mark Rajcok Dec 20 '13 at 22:43
6  
@Jess' link above has been changed to this Understanding Scopes ngInclude. Read the whole page, it's great. – pferdefleisch Jun 8 '14 at 15:18
1  
This is a great detailed answer, but I tried all of them without any success. I have a form with some input to a controller and the result of a controller should be viewed on another div. Once I enter any input the synchronicity will be lost and I will have a constant 0.00 value on the view div while the app is running. – zahra Mar 31 at 4:53
up vote 25 down vote

Instead of using this as the accepted answer suggests, use $parent instead. So in your partial1.htmlyou'll have:

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

If you want to learn more about the scope in ng-include or other directives, check this out: https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include

share|improve this answer
    
For any reader, he means $scope.$parent instead of $parent is undefined according to Angular. – Sebastialonso May 21 '15 at 20:09
1  
This answer saves the day for me! Thanks so much for pointing out the use of $parent. – Derek Webb May 31 '15 at 1:40
    
is $scope.$parent pass by reference? or it's just a copy of parent? – OMGPOP Jun 25 '15 at 12:01
1  
@Sebastiallonso is wrong. $scope.$parent.lineText is undefined. $parent.lineText is working, this.lineText or simply just lineText are also working – OMGPOP Jun 25 '15 at 12:09
    
Its $scope.$parent that works for me in angular 1.3.20 – radtek Mar 10 at 8:43
up vote 2 down vote

I've figured out how to work around this issue without mixing parent and sub scope data. Set a ng-if on the the ng-include element and set it to a scope variable. For example :

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

In your controller, when you have set all the data you need in your sub scope, then set show to true. The ng-include will copy at this moment the data set in your scope and set it in your sub scope.

The rule of thumb is to reduce scope data deeper the scope are, else you have this situation.

Max

share|improve this answer

protected by Pankaj Parkar Jun 11 '15 at 18:45

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.