angularjs - Angular: update ng-include on CRUD event -
In my index.html file there is a continuous sidebar that lists projects using ng-included. When a project is created, or updated. I would like to update the Sidebar with you I'm not sure which part of my code to provide, as it is expected that this is a fundamental question that is easy to answer, even though the solution has redeemed me
Edit: Looks like I'm almost there, but it does not seem to take the controller's property:
& lt; Div class = "col col-md-4" data-ng-controller = "project controller" data-ng-include src = "'{{sidebar url}}'" & gt; & Lt; / Div & gt;
In my project controller:
// Update existing project $ scope.update = function () {var project = $ scope.project; Project. $ Update (function () ($ location.path ('project /' + project._id); $ scope. $ Broadcast ('project updated');}, function (error repons) {$ scope.error = errorResponse.data .message; }); }; $ Scope.sidebarUrl = 'module / project / view / list-projects.client.view.html'; $ Scope $ ("Project updated", function (event, args) {$ scope.sidebarUrl = null; $ scope.sidebarUrl = 'module / project / view / list-projects.clit.'html';});
This is where services are your friends. Should cover.
Function microd service ($ http, ...) {...} angular.module ('my-app'). Service ('microd service', microd service);
Now, there are several ways that you can implement the update.
Use
$ rootScope
and broadcast a message is saying something has changed, and your sidebar controller will listen for that event ( Let's say you have it).// Project (proj) inside your service function update {// Update Project $ Root Scope $ Transmission ('Project-Update', Fusion); } // MySidebarController ($ scope) inside your controller function {$ scope. $ On ('project-updated', function () {...}); } To avoid using
$ rootScope
Encapsulate the Eventing Argument within your service . Just keep your list of your callback and execute them.
// MySidebarController (myCrudService) inside your controller function {myCrudService.onProjectChanged (function () {...}); }
Expose the shared data of your service which may be for the database.
// MySidebarController ($ scope, myCrudService) inside your controller function {$ scope.projects = myCrudService.projects; } Personally, I try to avoid
$ scope
in my controllers, but it is okay to use it for the event. However, I can write some type of instructions which allows me to perform an expression, whenever an event is removed to avoid it.& lt; My-event-binding event = 'project-updated' expression = 'sidebar.update project ()' />
Comments
Post a Comment