RichC RichC - 15 days ago 4
AngularJS Question

DOM doesn't get updated after angular event is fired is a different controller

DOM doesn't get updated after angular event is fired is a different controller.

If you add a couple of items into the list, delete one of the items, and then try to add another item, the model in angular is updated but the DOM stops updating.

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 -->

Answer

Change the way you delete your role. This way it's working

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

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

PLUNKER

Comments