AngularJS $scope.value = nulll not working

Question

I have an application which has code like this:

<div class="step-tab" id="tab_2" ng-class="{'step--active': step == 2}" ng-controller="eventCatCtrl">
    <div ng-if="step == 2" ng-include="'include/step2.php'"></div>
</div>

Inside my step2.php file I have:

<div class="form-group">
    <label for="catTitle">Category Title <span>*</span></label><input type="text" class="form-control" id="catTitle" ng-model="catTitle" placeholder="Please enter your Category Title">
</div>
<div class="form-group">
    <label for="catDes">Category Description</label><textarea name="" class="form-control" id="catDes" placeholder="Enter a description here" ng-model="catDes" id="" cols="10" rows="6"></textarea>
</div>
<div class="form-group">
    <input ng-click="catValues(catTitle, catDes, $event)" type="button" class="btn btn-default" value="Add Category">
</div>

I have triggered the function catValues and did:

eventApp.controller("eventCatCtrl", function($scope){
    $scope.catValues = function(catTitle, catDes, $event){
        $scope.catTitle = null;
        $scope.catDes = null;       
    }
});

However the null doesn't work, also a lot of other stuff that I have in that controller and in the functions work perfectly well but only this null doesn't work.

If I include ng-controller="eventCatCtrl" inside the step2.php file then the null works.

I would just like to know why the null is not clearing values of catTitle and catDes and why is everything else apart from that working fine.

Could you do `$scope.$parent.catTitle` ? – AturSams Oct 22 '14 at 12:02 — AturSams, Oct 22 '14 at 12:02
@Zehelvion `$scope.$parent.catTitle = null;` Doesn't work. – Oct 22 '14 at 12:04 — , Oct 22 '14 at 12:04

score 0 · Accepted Answer · edited Oct 23 '14 at 05:32

0

that's because ng-include create a separate scope, so in your id="tab_2" has eventCatCtrl, so the scope of eventCatCtrl controller is the parent scope for the scope which create by ng-include, So if u try to assign null it will check for the scope of eventCatCtrl it cannot see the scope of ng-include, thats why its not going to assign null for ng-include models.

Do achieve this in your case u can define the models in ng-include template in eventCatCtrl like below,

eventApp.controller("eventCatCtrl", function($scope){
        $scope.includeData = {}; 
    $scope.catValues = function(catTitle, catDes, $event){
        $scope.includeData.catTitle = null;                // modify this
        $scope.includeData.catDes = null;       
    }
});

and change your includes like this

<input type="text" class="form-control" id="catTitle" ng-model="includeData.catTitle" placeholder="Please enter your Category Title">

<textarea name="" class="form-control" id="catDes" placeholder="Enter a description here" ng-model="includeData.catDes" id="" cols="10" rows="6"></textarea>

edited Oct 23 '14 at 05:32

answered Oct 22 '14 at 11:59

Kalhan.Toress

21,683
8
68
92

So is there a solution to this, some other command that can make that null for me? Or the only way to make it work is to include the `ng-controller` inside `step2.php` file. – Oct 22 '14 at 12:09
is `catValues ` function execute after click the `button` ? – Kalhan.Toress Oct 22 '14 at 12:10
Yes it works. I have a lot of stuff in it and all the other stuff works fine. – Oct 22 '14 at 12:14
Okay it works, other ways of fixing this or maybe a detailed info of what is going on can be seen here: [link](http://stackoverflow.com/questions/11412410/angularjs-losing-scope-when-using-ng-include?rq=1) – Oct 23 '14 at 05:28

AngularJS $scope.value = nulll not working

1 Answers1