0

我尝试在健全的视图上制作一些编辑表单，我使用转发器来渲染它们，数据正在更新，我唯一的问题是在数据更新后隐藏编辑表单

我的观点：

        <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 不在范围内，我无法从控制器访问它们，因为它们在控制器中未定义。有没有办法从控制器访问它们？

4

2 回答 2

0

我认为在全局范围内调用了由于 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。

于 2013-07-29T08:13:59.027 回答
-1

正确检查您是否正确使用了功能，您应该注意这些事情

注册一个侦听器回调，以在 watchExpression 更改时执行。

每次调用 $digest() 时都会调用 watchExpression，并且应该返回将被监视的值。（由于 $digest() 在检测到更改时会重新运行，因此 watchExpression 可以在每个 $digest() 中执行多次，并且应该是幂等的。

仅当来自当前 watchExpression 的值与上一次调用 watchExpression 的值不相等时才调用侦听器（初始运行除外，见下文）。不等式是根据 angular.equals 函数确定的。为了保存对象的值以供以后比较，使用了 angular.copy 函数。这也意味着观看复杂的选项会对记忆和性能产生不利影响。

监视侦听器可能会更改模型，这可能会触发其他侦听器触发。这是通过重新运行观察者直到没有检测到变化来实现的。重新运行迭代限制为 10 以防止无限循环死锁。

如果您想在调用 $digest 时收到通知，您可以注册一个不带侦听器的 watchExpression 函数。（因为当检测到变化时 watchExpression 可以在每个 $digest 循环中执行多次，所以准备好多次调用你的监听器。）

于 2013-07-29T08:44:45.293 回答