鬆散角JS中的範圍

我有一個多選項卡Html頁面。在一個標籤上，我添加了3個輸入框和一個添加按鈕。每當添加按鈕被點擊時，數據將被添加到下面的網格中。但範圍不能訪問這些變量。下方附上我的代碼：鬆散角JS中的範圍

<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

來源

2016-10-28 Anish Jr

這是因爲NG-模板創建子範圍，這樣你就可以基本上做到的兩兩件事之一：

通過$ 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屬性是父範圍等最多$ rootScope。

當你使用ng-template時，它會創建一個新的子作用域，因此其中分配的值將存儲在子作用域中，而不是存儲在$ parent（您的控制器作用域）中。您正在搜索的值在子範圍內，因爲ng-model在當前範圍內起作用。所以你需要確保ng-model知道要寫哪個範圍。它可以通過$ parent參數或在對象內完成。至於第二種選擇 - 原因很簡單。當對象未定義時，不能分配對象值，因此搜索會進入上一級，等等。

來源

2016-10-28 09:49:08

鬆散角JS中的範圍

回答

相關問題