ng-include doesn't render partial view everytime using $scope

Question

inside view I'm conditionally rendering html using ng-include and ng-if

 <div ng-controller="myController"> <div ng-if="myProperty == 1"> <div ng-include="'view1.html'"></div> </div> <div ng-if="myProperty == 2"> <div ng-include="'view2.html'"></div> </div> </div>

and inside controller I have $scope.myProperty which receive value inside controller using $scope injection from other js object. On this controller I have also callback function which updates $scope.myProperty every x seconds.

app.controller('myController', function ($scope) { ... $scope.myProperty = 0; //init value function callback() { $scope.$apply(); // force update view // correctly write myProperty value on every data change console.log($scope.myProperty); } var otherJsObject= new myObject($scope, callback); otherJsObject.work(); ... }

callback function correctly change myProperty value but it doesn't update inside view every time.

update: $scope.bindUIProp = { a: $scope.myProperty};

 function callback() { $scope.$apply(); $scope.bindUIProp.a = $scope.myProperty; console.log('Callback ' + $scope.myProperty); console.log('drawstage ' + $scope.bindUIProp.a); } var otherJsObject= new myObject($scope, callback); otherJsObject.work();

and inside view I used object property

<div ng-controller="myController"> <div ng-if="bindUIProp.a == 1"> <div ng-include="'view1.html'"></div> </div> <div ng-if="bindUIProp.a == 2"> <div ng-include="'view2.html'"></div> </div> </div>

this approach work every time when page is refreshed, parial view is not updated from view1 to view2 when scope.bindUIProp.a is changed to 2.

I suppose you should show us more of your code. This doesn't make sense. — hgoebl
– hgoebl, Commented Sep 21, 2015 at 20:15
It may be a scope issue, try using the dot notation, check this stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model — JoseM
– JoseM, Commented Sep 21, 2015 at 20:17

Jay Jay Jay · Accepted Answer · 2015-09-21 20:18:13Z

1

Instead of writing to property at root level. Write one level below.

Instead of $scope.myProperty,

use $scope.mp.myProperty

answered Sep 21, 2015 at 20:18

Jay Jay Jay

2,0102 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2015-09-21 20:26:02Z

1

Both ng-if and ng-include create child scopes.

You are having problems due to using a primitive in your main scope. Primitives don't have inheritance so the binding is getting broken in the nested child scopes.

change it to an object:

$scope.myProperty = { someProp: 0};

Personally I rarely use ng-include because of the child scope it creates. I prefer having my own directive if all I want is to include a template.

edited Sep 21, 2015 at 20:26

answered Sep 21, 2015 at 20:17

charlietfl

172k14 gold badges125 silver badges154 bronze badges

8 Comments

user1765862 Over a year ago

thanks I'll try this. Is there an alternative then for ng-include?

Jay Jay Jay Over a year ago

Use angular directives

charlietfl Over a year ago

@JayJayJay agree...but keep in mind ng-include is a directive also, just a built in one

Jay Jay Jay Over a year ago

Oh thanks :). Should read up more so my comments can be more precise

Jay Jay Jay Over a year ago

Even if you were to use custom directives, as charlie mentions, it is best practise to use objects to enclose a property you bind to especially you are binding to the property and going to be making changes to the property

|

Collectives™ on Stack Overflow

ng-include doesn't render partial view everytime using $scope

2 Answers 2

Comments

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Linked

Related