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; 

проблема заключается в том, что мой г ynamically созданные переменные, такие как edit_alt_name_index, не входят в область видимости, и я не могу получить к ним доступ из моего контроллера, потому что они не определены в контроллере. Есть ли способ получить к ним доступ от контроллера?

Answer 1

Я думаю, что это угловая проверка, которая терпит неудачу из-за того, что 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() и должна возвращать значение, которое будет наблюдаться. (Так как $ digest() повторно запускает, когда обнаруживает изменения, watchExpression может выполняться несколько раз в $ digest() и должен быть идемпотентным.

Слушатель вызывается только тогда, когда значение из текущего watchExpression и предыдущего вызова watchExpression не равным (за исключением начального прогона, см. ниже). Неравенство определяется в соответствии с функцией угловых.элементов. Чтобы сохранить значение объекта для последующего сравнения, используется функция угловой.copy, а также означает, что просмотр комплексные варианты будут иметь неблагоприятные последствия для памяти и производительности.

Слушатель может изменить модель, которая может привести к срабатыванию других слушателей. Это достигается путем повторного наблюдения наблюдателей до тех пор, пока изменения не будут обнаружены. 10, чтобы предотвратить тупик с бесконечным циклом.

Если вы хотите получать уведомление, когда вызывается $ digest, вы можете зарегистрировать функцию watchExpression без прослушивателя. (Так как watchExpression может выполняться несколько раз за цикл $ digest при обнаружении изменения, будьте готовы к нескольким вызовам вашего слушателя.)