AngularJS : after isolating scope and binding to a parentFunction, how to pass parameters to this parentFunction? -
i'm trying hard understand scopes in angularjs , running problems. i've created simple "comments" application that
- has input box publishing comment (text + 'reply' button) [this working fine]
- clicking 'reply' button unhides input box publishing reply (with 'publishreply' button)
- clicking 'publishreply' button, publishes reply below original comment , indents it.
i generate comments within 'commentsdirective' using ng-repeat , embed 'replydirective' within each ng-repeat. i'm able bind parent scope's functions child directive's isolated scope, i'm not able pass arguments function.
again, think, scope related problem preventing me hide/unhide 'replydirective' on-click of 'reply' button.
grateful help.
here code in plunker: http://plnkr.co/edit/5amlboh6iepby9k2ljde?p=preview
<body ng-app="comments"> <div ng-controller="maincontroller"> <div class="publishcomment"><input type="text" ng-model="contentforpublishing"/><button ng-click="publishcomment(null, 0, contentforpublishing)">publish comment</button></div> <comments-directive></comments-directive> </div> </body> <script> angular.module('comments', []) .controller('maincontroller', function($scope) { $scope.comments = [ { id: 1, parentid: 0, content:'first comment'}, { id: 2, parentid: 0, content:'second comment'} ]; $scope.publishcomment = function (commentid, commentparentid, contentforpublishing){ if (commentid === null) {commentid = $scope.comments.length + 1;} // (commentid === null) sent publishcomments , not publishreply $scope.comments.push( { id: commentid, parentid:commentparentid, content:contentforpublishing } ); $scope.contentforpublishing = ""; } $scope.replywidgetvisible = false; $scope.showreplywidget = function() { $scope.replywidgetvisible = true; } }) .directive('commentsdirective', function() { return { restrict: 'e', // template: '<div id="{{comment.id}}" class="commentwrapper" ng-class="{{ {true: '', false: 'indentleft'}[{{comment.parentid}} === 0] }}" ng-repeat="comment in comments">' + template: '<div id="{{comment.id}}" class="commentwrapper" ng-repeat="comment in comments">' + 'id: {{comment.id}} parentid: {{comment.parentid}}<br>>> {{comment.content}}<br>' + '<button class="reply" ng-click="showreplywidget()">reply</button>' + // '<reply-directive publish-reply="publishcomment()" ng-show="{{replywidgetvisible}}" reply-widget-visible="replywidgetvisible"></reply-directive>' + '<reply-directive publish-reply="publishcomment()" comments-array="comments"></reply-directive>' + '</div>' }; }) .directive('replydirective', function() { return { restrict: 'e', scope: { publishreply: '&', commentsarray: '=', replywidgetvisible: '=' }, template: '<div class="publishcomment"><input type="text" ng-model="contentforpublishing"/><button ng-click="publishreply(5, 1, contentforpublishing)">publish reply</button></div>' }; }); </script>
basically need "fetch" publishcomment function, since publish-reply="publishcomment()" telling angular call publishcomment without arguments, regardless of arguments passing on isolated scope. so, reach publishcomment function (and not predefined executing function), can pass in arguments, need to:
.directive('commentsdirective', function() { return { restrict: 'e', template: '<div id="{{comment.id}}" class="commentwrapper" ng-repeat="comment in comments">' + 'id: {{comment.id}} parentid: {{comment.parentid}}<br>>> {{comment.content}}<br>' + '<button class="reply" ng-click="showreplywidget()">reply</button>' + '<reply-directive publish-reply="publishreply()" comments-array="comments"></reply-directive>' + '</div>', link: function(scope){ scope.publishreply = function(){ return scope.publishcomment; } } }; }) .directive('replydirective', function() { return { restrict: 'e', scope: { publishreply: '&', commentsarray: '=', replywidgetvisible: '=' }, template: '<div class="publishcomment"><input type="text" ng-model="contentforpublishing"/><button ng-click="publishreply(5, 1, contentforpublishing)">publish reply</button></div>', link: function(scope) { scope.publishreply = scope.publishreply(); } }; }); think if doing: (function(){ return scope.publishcomment(); })(5, 1, contentforpublishing);
doing "get reference function" parent scope binding useful when passed function mutable. example, my-cool-function="dothis()" , on part of app my-cool-function="dothat()". exist can reuse same directive in many situations, isn't case here.
a simpler way $emit publish event isolated scope , catch in comments directive. or create scope true can access, in newly created child scope, function directly parent.
see updated plnkr in here http://plnkr.co/edit/nowwfj35xrxaioxnplw4?p=preview
here plnkr showing how keep 1 reply box opened (you can keep many open if wish) http://plnkr.co/edit/za16ehpzltgljk5ra1vb?p=preview (see revision before widget state each comment)
Comments
Post a Comment