AngularJS：範圍有鑑於變量

Question

我儘量讓在理智的看法有些編輯表單，我使用中繼器，使它們的數據正在更新好了，我唯一的問題是數據更新後隱藏編輯表單

我的觀點：

 <div style="margin-left: 5px; border-top: 1px solid #eee; margin-bottom:5px;" data-ng-repeat="name in person.master_data.alternative_names"> 

     <div id='editor-primary_name' class="editor span6"> 
      <button id="edit-primary_name" type="button" class="btn btn-mini btn-toggle" data-ng-click="edit_alt_name{{$index}} = true"> 
      <i class="icon-pencil"></i> 
     </button> 

     <div data-ng-show="!edit_alt_name{{$index}}"> 
     <div class="span2 control-label"><p>First Name(s):</p></div> 
     <div class="span3 break-word"><strong id="preview_pers_first_name">{{name.first_name}}</strong></div> 
     <div class="clearfix"></div> 

     <div id="preview_pers_last_name"> 
      <div class="span2 control-label"><p>Last Name:</p></div> 
      <div class="span3 break-word"><strong>{{name.last_name}}</strong></div> 
      <div class="clearfix"></div> 
     </div> 

     <div id="preview_pers_full_name"> 
      <div class="span2 control-label"><p>Full Name/ Presentation:</p></div> 
      <div class="span3 break-word"><strong>{{name.presentation_name}}</strong></div> 
      <div class="clearfix"></div> 
     </div> 

     <div id="preview_pers_full_name"> 
      <div class="span2 control-label"><p>Name Type:</p></div> 
      <div class="span3 break-word"><strong>{{name.type}}</strong></div> 
      <div class="clearfix"></div> 
     </div> 

     <div id="preview_pers_full_name"> 
      <div class="span2 control-label"><p>SUISA IPI Number:</p></div> 
      <div class="span3 break-word"><strong>{{name.suisa_ipi_number}}</strong></div> 
      <div class="clearfix"></div> 
     </div> 
     </div> 
    <div class="clearfix"></div> 

    <div class="FORM" data-ng-show="edit_alt_name{{$index}}"> 
     <form class="form-horizontal" data-ng-submit="submit_primary_name({{$index}})" > 
      <fieldset id="fieldset1"> 
       <div class="row control-group"> 
        <div class="span2 control-label"><p>First Name(s):</p></div> 
        <div class="span3 break-word"><input type="text" id="first_name" data-ng-model="name.first_name" data-ng-disabled="form_disabled"/></div> 
        <div class="clearfix"></div> 
       </div> 


       <div id="preview_pers_last_name" class="row control-group"> 
       <div class="span2 control-label"><p>Last Name:</p></div> 
       <div class="span3 break-word"><input type="text" id="last_name" data-ng-model="name.last_name" data-ng-disabled="form_disabled"/></div> 
       <div class="clearfix"></div> 
       </div> 

       <div id="preview_pers_full_name" class="row control-group"> 
       <div class="span2 control-label"><p>Full Name/ Presentation:</p></div> 
       <div class="span3 break-word"><input type="text" id="presentation_name" data-ng-model="name.presentation_name" data-ng-disabled="form_disabled"/></div> 
       <div class="clearfix"></div> 
       </div> 

       <div id="preview_pers_suisa_number" class="row control-group" data-ng-if="person.master_data.roles"> 
       <div class="span2 control-label"><p>SUISA IPI Number:</p></div> 
       <div class="span3 break-word"><input type="text" id="suisa_ipi" data-ng-model="name.suisa_ipi_number" data-ng-disabled="form_disabled"/></div> 
       <div class="clearfix"></div> 
       </div> 

       <div class="row control-group"> 
       <button type="submit" class="btn btn-success">Submit</button> 
       <button type="button" class="btn btn-danger" data-ng-click="edit_alt_name{{$index}} = false" >Cancel</button> 
       </div> 
      </fieldset> 
     </form> 
     </div> 
    </div> 

我的控制器：

$scope.submit_primary_name = function(name_id){ 
      personService.updatePerson($scope.person); 
      $scope.form_disabled = true; 
      $scope.alt_name_id = name_id; 
     } 
     /** 
      * VIEW ACCESSIBLE METHODS 
      */ 

     init(); // fires the init function after all other controller methods have loaded 

     $scope.$watch(function() { return personService.getSelectedPerson() }, function() { 
      var person = this.get(); 
      if (person != null) { 
      $scope.person = person;    
      // personService.setSelectedPerson(person); 
      } 
      $scope.cancel_edit_primary_name();   
      eval("$scope.edit_alt_name" + $scope.alt_name_id + "=false;"); 

      console.log($scope.edit_alt_name0); 
      $scope.form_disabled = false; 

的問題是，我的d像創建的變量edit_alt_name_index不在範圍內，我無法從控制器訪問它們，因爲它們在控制器中未定義。有沒有一種方法可以從控制器訪問它們？

Answer 1

我認爲這是Angulars髒檢查由於EVAL是在全球範圍內（我認爲）調用失敗。試試這個：

// replace this: 
eval("$scope.edit_alt_name" + $scope.alt_name_id + "=false;"); 
// with 
$scope['edit_alt_name' + $scope.alt_name_id] = false; 

噢，別忘了eval是邪惡的（Why is using the JavaScript eval function a bad idea?）:)

下面是一個例子：http://jsfiddle.net/fredrik/dZmgv/

「窗體2」 不會隱藏，因爲它使用EVAL。

Answer 2

正確檢查它，你已經使用功能正常，你應該採取的這些東西

註冊了一個偵聽器回調護理要執行每當watchExpression變化。

的watchExpression被稱爲在每次調用$摘要（）和應該返回將被關注的價值。 （由於$ digest（）在檢測到更改時重新運行，watchExpression可以每$ digest（）多次執行並且應該是冪等的。

只有噹噹前watchExpression和先前調用watchExpression的值爲不等於（除初始運行外，見下文）不等式是根據angular.equals函數確定的。爲了保存對象的值以供以後比較，使用angular.copy函數，這也意味着觀看複雜的選項會產生不良的內存和性能影響

手錶監聽器可能會更改模型，這可能會觸發其他監聽器觸發，這是通過重新運行監視器直到沒有檢測到更改來實現的，重新運行的迭代限制是10來防止死循環死鎖。

如果您希望收到通知，只要$消化被調用，您可以註冊任何監聽器watchExpression功能。 （由於watchExpression可以執行多次，每次$檢測到變化時，消化週期，對多次調用你的聽衆準備。）