Question

我有一个多标签页面。在一个选项卡上，我添加了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

Answer 1

那是因为ng-template创建了子范围，所以你基本上可以做两件事之一：

通过$ parent访问属性（如$ parent.employeess）。例如：https://plnkr.co/edit/2LLakRumEB25wyNhNmDg?p=preview）
为下面的新项目定义对象。

实施例： https://plnkr.co/edit/sFkim5WwN5ffPsWtdcDP?p=preview

$scope.newRow = {
  names: '',
  employeess: '',
  headoffices: ''
}

并通过相同的前缀访问它们：

ng-model="newRow.employeess"

说明：

范围具有通用结构，其中$ parent属性是父范围e.t.c，最多为$ rootScope。

当您使用ng-template时，它会创建一个新的子范围，因此在其中分配的值将存储在子范围中，而不是存储在$ parent（您的控制器范围）中。您要搜索的值位于子范围内，因为ng-model在当前范围内工作。因此，您需要确保ng-model知道要写入哪个范围。它可以通过$ parent参数或在object中完成。至于第二种选择 - 原因很简单。当对象未定义时，无法分配对象值，因此搜索会转到较高级别，依此类推。

角度JS中的松散范围

1 个答案: