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, Sep 21 '15 at 20:15
It *may* be a scope issue, try using the dot notation, check this http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model — JoseM, Sep 21 '15 at 20:17

charlietfl · Answer 1 · 2015-09-21T20:26:02.367

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 '15 at 20:26

answered Sep 21 '15 at 20:17

charlietfl

170,828
13
121
150

thanks I'll try this. Is there an alternative then for ng-include? – user1765862 Sep 21 '15 at 20:20
Use angular directives – Jay Jay Jay Sep 21 '15 at 20:21
@JayJayJay agree...but keep in mind `ng-include` is a directive also, just a built in one – charlietfl Sep 21 '15 at 20:22
Oh thanks :). Should read up more so my comments can be more precise – Jay Jay Jay Sep 21 '15 at 20:23
@user1765862 it is best practice to always use objects in your scope models anyway – charlietfl Sep 21 '15 at 20:23
1

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 – Jay Jay Jay Sep 21 '15 at 20:25
I updated question. It works only when page is refreshed until first view change. Any ideas? – user1765862 Sep 21 '15 at 21:08
make a demo . I'm not clear on what you are trying to do with `function cb()` or `new myObject` or new myObject – charlietfl Sep 21 '15 at 21:11

score 1 · Answer 2 · answered Sep 21 '15 at 20:18

1

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

Instead of $scope.myProperty,

use $scope.mp.myProperty

answered Sep 21 '15 at 20:18

Jay Jay Jay

1,970
2
25
47

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

2 Answers2