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可以执行多次，每次$检测到变化时，消化周期，对多次调用你的听众准备。）