如何使用Angular包含的文件中的$ scope值

时间:2016-11-01 11:17:42

标签: javascript jquery html angularjs

在使用ng-include im的Angularjs面临一些麻烦...... 我有一个单独的html表单,并包含其他html。
如果这是我的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>


在Tab1.html

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


在我的控制器中

angular.module('app')

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

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

})

必须是小错误但不知道在哪里...... 提前感谢您的确定!!

2 个答案:

答案 0 :(得分:0)

这样做

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

删除子div中的控制器,它将占用当前范围;

也在控制器使用中

$scope.data={name:""};
$scope.save= function(){
    console.log($scope.data);
}

它会起作用;

答案 1 :(得分:0)

ng-include创建一个子范围来访问父范围使用$ prarent

Tab1.html中的

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