CODEWITHSUNDEEP
javascriptangularjs
oberien
oberien

Reputation: 21

Scope of ngController doesn't update with ngInclude

Here is a Plunker: http://plnkr.co/edit/F6QM4KUU8DPNq6muInGS?p=preview

Including an html file with ng-include, having set the ng-controller in the same tag, doesn't update the controller's scope models. Using the ng-model directly inside of the html works perfectly fine, and also setting the controller inside of the included html file is working. But ng-include together with ng-controller $scope.models don't update and stay as they are. For whatever reason if you set the model inside of the controller, it is done suring it's loading. But having a method setting the model (not included in the plunker) only changes the mdoel inside of the controller's scope and not the html one.

Also if I use an ng-include in the scope of another controller and want to access the included models return undefined or the value you set the model to. Calling methods from the included html works fine in both cases, but they can't really operate as the values are wrong.

I saw that a similar issue has already been postet and should have been resolved (https://github.com/angular/angular.js/issues/4431), but as you can see in the plunker for me it doesn't.

Do I miss something, or is this a problem of angular?

Kind Regards, BH16

PS: Here is the code from the Plunker: index.html - body

<body ng:controller="MainCtrl">
  <input type="text" ng:model="input">{{input}} {{getInput()}}
  <div ng:include="'main2.html'" ng:controller="Main2Ctrl"></div>
</body>

main2.html

<div>
  <input type="text" ng:model="input2">{{input2}} {{getInput2()}}
</div>

script.js

angular.module('testApp', [])
  .controller('Main2Ctrl', function($scope) {
    $scope.input2 = 1234;
    $scope.getInput2 = function() {
      console.log("input2");
      return $scope.input2;
    };
  })
  .controller('MainCtrl', function($scope) {
    $scope.input = 1234;
    $scope.getInput = function() {
      console.log("input");
      return $scope.input;
    }
  });

Upvotes: 0

Views: 651

Answers (2)

oberien
oberien

Reputation: 21

For all of those who are are also having this issue: Just use the controllerAs syntax: http://toddmotto.com/digging-into-angulars-controller-as-syntax/

This solves all of the issues above and simplifies the code A LOT!

This is the basic idea of controllerAs (taken from the site above):

<div ng-controller="MainCtrl as main">
  {{ main.title }}
  <div ng-controller="AnotherCtrl as another">
    Scope title: {{ another.title }}
    Parent title: {{ main.title }}
    <div ng-controller="YetAnotherCtrl as yet">
      Scope title: {{ yet.title }}
      Parent title: {{ another.title }}
      Parent parent title: {{ main.title }}
    </div>
  </div>
</div>

Upvotes: 2

Rasalom
Rasalom

Reputation: 3111

It's related to that ng-include creates it's own scope. To see what's actually happens you can try plugin(for google chrome, probably something similar exists for others browser's too): "AngularJS Batarang", it will include additional tab to dev tools.

And possible solution will be: 

main2.html:

<div ng:controller="Main2Ctrl">
  <input type="text" ng:model="input2"> {{input2}} {{getInput2()}}
</div>

http://plnkr.co/edit/daIehNjxWdam3NyH3ww4?p=preview

Upvotes: 0

Related Questions