0
여러 탭의 HTML 페이지가 있습니다. 하나의 탭에 3 개의 입력 상자와 추가 버튼을 추가했습니다. 추가 버튼을 클릭 할 때마다 아래의 표에 추가 할 데이터입니다. 그러나 범위는 이러한 변수에 액세스하지 않습니다. 아래에있는 내 코드를 첨부 :각도가 느슨한 범위
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="tabs">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type ="text/javascript" id="one.tpl.html">
<div class="form-group">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="name"
ng-model="names" />{{name}}
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Employees</label>
<div class="col-md-4">
<input type="text" class="form-control" name="employees"
ng-model="employeess" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Headoffice</label>
<div class="col-md-4">
<input type="text" class="form-control" name="headoffice"
ng-model="headoffices" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="button" value="Add" ng-click="addRow()" class="btn btn-primary"/>
</div>
</div>
<div>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
</tr>
<tr ng-repeat="company in companies">
<td>{{company.name}}
</td>
<td>{{company.employees}}
</td>
<td>{{company.headoffice}}
</td>
</tr>
</table>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div id="viewTwo">
<h1>View Two</h1>
<p>Test 2</p>
</div>
</script>
<script type="text/ng-template" id="three.tpl.html">
<div id="viewThree">
<h1>View Three</h1>
<p>Test 3</p>
</div>
</script>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.companies = [];
$scope.tabs = [{
title: 'One',
url: 'one.tpl.html'
}, {
title: 'Two',
url: 'two.tpl.html'
}, {
title: 'Three',
url: 'three.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.names, 'employees': $scope.employeess, 'headoffice':$scope.headoffices });
$scope.names='';
$scope.employeess='';
$scope.headoffices='';
}
});
</script>
<style>
#tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 5px 0px 5px;
background-color: #CCC;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
.active {
background-color: #FFF;
color: #000;
}
</style>
</body>
</html>
다음과 같은 변수가 범위에 액세스 할 수 없습니다 :
겨 템플릿이 아이의 범위를 만들기 때문에 당신이 기본적으로 할 수있는 자,$scope.names
$scope.employeess
$scope.headoffices