swati kiran swati kiran - 1 month ago 5
AngularJS Question

How to use $scope values from Angular included files

In Angularjs using ng-include im facing some trouble...

Im having a single html form and including other html within it.

If this is my main.html..


<div ng-controller="appCtrl">
<div ng-include src="'/Tab1.html'"></div>
{{data.name}}
<!--trying to use one of the Tab1 field but unable to fetch -->
<button type="submit" ng-click=save()>Save</button>
</div>




in Tab1.html



<div ng-controller="appCtrl">
<input type="text" ng-model="data.name">
{{data.name}}<!--getting the value here-->
</div>




in my controller



angular.module('app')

.controller('appCtrl', ['$scope', '$http','$routeParams','$rootScope' ,'$location',
function($scope, $http, $routeParams, $rootScope ,$location){

$scope.save= function(){
console.log($scope.data);//undefined...
}

})



Must be minior mistake but not known where...Thanks in advance for fixing!!

Answer

ng-include creates a child scope to acces the parent scope use $prarent

in Tab1.html

<div>
<input type="text" ng-model="$parent.data.name">
{{$parent.data.name}}<!--getting the value here-->
</div>