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;

問題是我動態創建的變量（例如edit_alt_name_index）不在范圍內，並且我無法從控制器訪問它們，因為它們在控制器中未定義。 是否有從控制器訪問它們的方法？

Answer 1

我認為是由於在全局范圍內調用eval而導致的Angulars臟檢查失敗。 嘗試這個：

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

哦，是的，不要忘記eval是邪惡的（ 為什么使用JavaScript eval函數是個壞主意？ ）:)

這是一個示例： http : //jsfiddle.net/fredrik/dZmgv/

“ form 2”不會隱藏，因為它使用eval。

Answer 2

正確檢查您是否正確使用了功能，您應該注意以下事項

注冊一個當watchExpression更改時要執行的偵聽器回調。

在每次調用$ digest（）時都會調用watchExpression，並且應返回將被監視的值。 （由於$ digest（）在檢測到更改時會重新運行，因此watchExpression每個$ digest（）可以執行多次，並且應該是冪等的。

僅當當前watchExpression的值與上一次對watchExpression的調用的值不相等時才調用偵聽器（初始運行除外，請參見下文）。 不等式是根據angular.equals函數確定的。 為了保存對象的值以供以后比較，使用了angular.copy函數。 這也意味着觀看復雜的選項將對內存和性能產生負面影響。

監視聽眾可能會更改模型，這可能會觸發其他聽眾觸發。 通過重新運行觀察程序，直到沒有檢測到任何更改為止，可以實現此目的。 重運行迭代限制為10，以防止無限循環死鎖。

如果希望在調用$ digest時得到通知，則可以注冊一個沒有監聽器的watchExpression函數。 （由於當檢測到更改時，watchExpression在每個$ digest循環中可以執行多次，因此請為多次調用偵聽器做好准備。）