触发角度事件后，DOM不会更新是一个不同的控制器

时间：2016-11-18 21:32:25

标签： javascript angularjs dom

在触发角度事件后，DOM不会更新是一个不同的控制器。

如果你在列表中添加了几个项目，删除其中一个项目，然后尝试添加另一个项目，角度模型会更新，但DOM会停止更新。

Here's a Plunker with an example. 

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="fontawesome@4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="app">
      <field-tools></field-tools>
      <participant-role-add-modal></participant-role-add-modal>
    </div>
  </body>

</html>

JS 

var app = angular.module("app", []);

function fieldToolsController($scope, ParticipantRoles) {
    var model = this;
    model.participantRoles = ParticipantRoles;
  console.log(model);

    model.deleteSelectedRole = function () {
        model.participantRoles = model.participantRoles.filter(function (e) { return e.name !== model.selectedRole.name });

      console.log(model);
    };
}

function participantRoleAddController($scope, ParticipantRoles) {
    var model = this;
    model.participantRoles = ParticipantRoles;
  console.log(model);

    model.saveNewRole = function () {
        model.participantRoles.push(model.newRole);
        model.newRole = null;
        model.selectedRole = model.participantRoles[model.participantRoles.length - 1].name;
        $('#participant-role-add-modal').modal('toggle');
  console.log(model);
    };
}

app.factory('ParticipantRoles', function () {
    return [];
});

app.component("fieldTools", {
    templateUrl: "content1.html",
    controllerAs: "model",
    controller: ["$scope", "ParticipantRoles", fieldToolsController]
});

app.component("participantRoleAddModal", {
    templateUrl: "content2.html",
    controllerAs: "model",
    controller: ["$scope", "ParticipantRoles", participantRoleAddController]
});

content1 Template 

<div id="default-container">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-tools">
            <div class="panel-heading">
                <button ng-class="{disabled: model.participantRoles.length==0}" class="btn btn-danger btn-xs pull-right" style="margin-top: -1px;margin-right: -8px;" ng-click="model.deleteSelectedRole()"><span class="fa fa-remove"></span></button>
                <button class="btn btn-success btn-xs pull-right" style="margin-top: -1px;margin-right: 4px;" data-toggle="modal" data-target="#participant-role-add-modal"><span class="fa fa-plus"></span> Add</button>
                <h4 class="panel-title">
                    <span class="fa fa-user"></span> Participant Roles
                </h4>
            </div>
            <div role="tabpanel">
                <div class="panel-body">
                    <span class="text-muted" ng-hide="model.participantRoles.length > 0">Please add a Participant Role above.</span>
                    <select class="form-control" ng-show="model.participantRoles.length > 0" ng-model="model.selectedRole" ng-options="r.name for r in model.participantRoles track by t.name" />
                </div>
            </div>
        </div>
        <div class="panel panel-tools" ng-show="model.participantRoles.length > 0">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <span class="fa fa-check-square-o"></span> Fillable Data Fields<span class="fa fa-chevron-circle-down pull-right"></span>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <ul class="list-group">
                    <li class="list-group-item ui-draggable ui-draggable-handle"><span class="fa fa-ellipsis-v pull-right"></span><span class="fa fa-ellipsis-v pull-right"></span><span class="fa fa-ellipsis-v pull-right"></span><span class="dragme" style="display: none;">drag me <span class="fa fa-arrow-right"></span> </span>Textbox</li>
                    <li class="list-group-item ui-draggable ui-draggable-handle"><span class="fa fa-ellipsis-v pull-right"></span><span class="fa fa-ellipsis-v pull-right"></span><span class="fa fa-ellipsis-v pull-right"></span><span class="dragme" style="display: none;">drag me <span class="fa fa-arrow-right"></span> </span>Single Choice</li>
                    <li class="list-group-item ui-draggable ui-draggable-handle"><span class="fa fa-ellipsis-v pull-right"></span><span class="fa fa-ellipsis-v pull-right"></span><span class="fa fa-ellipsis-v pull-right"></span><span class="dragme" style="display: none;">drag me <span class="fa fa-arrow-right"></span> </span>Multiple Choice</li>
                    <li class="list-group-item ui-draggable ui-draggable-handle"><span class="fa fa-ellipsis-v pull-right"></span><span class="fa fa-ellipsis-v pull-right"></span><span class="fa fa-ellipsis-v pull-right"></span><span class="dragme" style="display: none;">drag me <span class="fa fa-arrow-right"></span> </span>Dropdown List</li>
                </ul>
            </div>
        </div>
    </div>
</div>

content2 Template 

<div id="participant-role-add-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <form>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Add New Participant Role</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-3 control-label">Role Name</label>
                            <div class="col-sm-9">
                                <input id="RoleName" type="text" class="form-control" ng-model="model.newRole.name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-3 control-label">Comment</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" ng-model="model.newRole.comment">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" ng-click="model.saveNewRole()">Save changes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div><!-- /.modal-content -->
        </form>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

1 个答案:

答案 0 :(得分：1)

更改删除角色的方式。这样就可以了

model.deleteSelectedRole = function (selectedRole) {
    model.participantRoles.splice(model.participantRoles[selectedRole], 1)
};

ng-click="model.deleteSelectedRole(model.selectedRole)"

<强> PLUNKER

相关问题
最新问题