I have a problem which I have recently found myself obsessed with, see, I extreamly Now need you to show me the way of working the problem out.
My business task was to create a list of posts with comments to each of them.
Each post have 3 state: view, edit and deleted.
I’ve created directives Post and Comment. I’ve also created PostList and CommentList directives to manage Posts and Comments.
Post and Comment are similar code:
http://plnkr.co/edit/k77kdSwPnqY4jR5EY7N4?p=preview
app.directive("Post", function ($templateCache, $compile) {
function getTemplate(mode) {
switch (mode) {
case "create":
return "createPost.html";
case "view":
return "viewPost.html";
case "delete":
return "deletePost.html";
}
}
var defaultMode = "view";
return {
scope: {},
restrict: "AE",
compile: function (elem, attrs, transclude) {
return function ($scope, $element, $attr) {
function updateTemplate() {
$element.html("");
$compile($templateCache.get(getTemplate($scope.mode)).trim())($scope, function (clonedElement, scope) {
clonedElement.appendTo($element);
});
}
$scope.mode = $attr.mode || defaultMode;
$scope.$watch("mode", updateTemplate);
}
}
}
})
Each of templates (e.g. viewPost.html) have a lot of bindings and directives such as ng-show, ng-src, ng-bind-html-unsafe.
The viewPost.html contains commentList directive which responsible for displaying list of comments.
When I compile a Post the compilation of each comment for this post are launching automatically.
Here is the tree of directives:
When I want to render a list of 20 posts with several comments to each of them, I’m waiting for more than a second before the work is done. Web page don’t response while this period.
Is my way correct to organize such structure?
Is Angular suitable for this business task?
I do love Angular, but now I feel upset and I’m afraid that Angular isn’t a good choice for this task.
Please, help me to bring back my hope and truly love to Angular. Tell me what I made wrong.
Here is my project which I really want you to look at:
http://vokruge.com/signin
login: [email protected]
pass: 123456
Be aware that’s all in Russian. You can visit this page to see how slow it is right now: http://vokruge.com/feed/280 .
I approached this a totally different way and it is fast and works well.
I didn’t use directives at all.
I used recursive templates
Here is an example of the template. I have left the css classes in to help you see what each section does
<script type="text/ng-template" id="responsetemplate">
<div class="reply">
<div class="wrapper">
<div class="questioninner">
<div class="mainreply">
<p ng-show="!model.edit" ng-click="edit(model)" ng-bind="model.message"></p>
<div ng-show="model.edit">
<textarea ng-model="model.message"></textarea>
<button ng-click="save(model)">save</button>
<button ng-click="cancel($parent,model)">cancel</button>
</div>
</div>
<div class="replyfooter">
<div class="actions">
<div ng-show="!model.edit">
<a ng-click="edit(model)">edit</a>
<a ng-click="delete($parent,model)">retract</a>
<a ng-click="reply(model)">reply</a>
</div>
</div>
</div>
</div>
</div>
<div>
<div ng-repeat="model in model.responses" ng-include="'responsetemplate'"></div>
</div>
</div>
</script>
The template shows a question and it recursively shows all the responses to the question using the ng-repeat and ng-include.
model is where i store my data which is basically the question and an array of responses that have arrays of responses as children.
the example is also setup for editing, deleting and replying.