访问父$ scope

时间:2014-01-19 14:49:44

标签: angularjs angularjs-scope angularjs-ng-repeat

我之前已发布此post,并选择不提供我的所有代码。但是现在我因为同样的问题而陷入困境,所以我在提供所有代码时给它做了改动。

我知道当代码很大时调试起来并不容易,所以我会尝试解释这个问题。

实际上我的先例post中描述了这个问题,所以请阅读它并查看简化此代码的代码。

但基本上问题是:我想从$scope.data.comments函数访问$scope.deleteComment()

当你看到下面的代码时,你会注意到我必须两次添加ng-controller="CommentController"才能使用它。 如果有人可以解释为什么......这会很棒,但我想这是另一个问题。

提前感谢您的帮助。

主要HTML

<div ng-init="loadComments('${params.username}', '${params.urlname}' )" ng-controller="CommentController">
    <div ng-repeat="comments in data.comments"  >
        <div sdcomment param="comments" ></div>
    </div>
</div>

应用

var soundshareApp = angular.module('soundshareApp', ['ngCookies']);

指令

soundshareApp.directive('sdcomment', ['$cookies', function($cookies){

    var discussionId = null;
    var found = false;
    var username = $cookies.soundshare_username;

    return {
        restrict:'A',
        scope: {
            commentData: '=param'
        },
        templateUrl: '/js/views/comment/templates/commentList.html',

        link : function(scope, element, attrs, controller) {
            scope.$watch(element.children(), function(){
                var children = element.children();
                for(var i=0; i<children.length; i++){
                    if(children[i].nodeType !== 8){ //pas un commentaire <!-- -->
                        if( !found ){
                            found = true;
                            discussionId == scope.commentData.discussionId
                        }else if(found && discussionId == scope.commentData.discussionId){
                            angular.element(children[i]).removeClass('message-content');
                            angular.element(children[i]).addClass('answer-message-content');
                        }
                        if(found && discussionId != scope.commentData.discussionId){
                            discussionId = scope.commentData.discussionId
                        }

                        if(username == scope.commentData.username){
                            element.parent().bind('mouseover', function() {
                              // $(".delete-comment-button").show()
                               element.parent().find("span.delete-comment-button:first").attr('style', 'display: block !important');
                            });
                            element.parent().bind('mouseleave', function() {
                                element.parent().find("span.delete-comment-button:first").attr('style', 'none: block !important');
                            });
                        }
                    }
                }
            });
        }
    }
}]);

TEMPLATE

<div class="message-wrapper"  ng-controller="CommentController">
    <div  class='message-content' ng-click="state.show = !state.show; setUsername(commentData.username)">
        <img class='message-vignette' ng-src='{{commentData.avatarUrl}}'/>
        <div class='message-username'>{{commentData.username}}</div>
        <div class='project-message'>{{commentData.comment}}</div>
        <div class='message-date'>{{commentData.dateCreated | date:'dd.MM.yyyy @ hh:mm:ss' }}</div>
        <div class="clearfix"></div>
    </div>

    <div ng-repeat="answer in answers" class="answer-message-content"  >
        <div class='message-content' ng-click="state.show = !state.show">
            <img class='message-vignette' ng-src='{{answer.avatarUrl}}'/>
            <div class='message-username'>{{answer.username}}</div>
            <div class='project-message'> {{answer.comment}}</div>
            <div class='message-date'>{{answer.dateCreated | date:'MM/dd/yyyy @ h:mma' }}</div>
            <div class="clearfix"></div>
        </div>
    </div>

    <div class="add-comment-content show-hide" ng-show="state.show"  >
        <img class='message-vignette answer-message-vignette' ng-src='{{commentData.currentUserAvatarUrl}}'>
        <div class="">
            <form ng-submit="addComment(commentData)"   id="commentForm-{{commentData.projectId}}">
                <input id="input-comment-{{commentData.projectId}}" type="text" maxlength=""  autofocus="autofocus" name="comment" placeholder="Write a comment..." ng-model="commentData.msg">
                <input type="hidden" name="discussionId" value="{{commentData.discussionId}}" >
                <input type="hidden" name="projectId" value="{{commentData.projectId}}" >
            </form>
        </div>
    </div>
    <span ng-click="deleteComment(commentData)" class="btn btn-default btn-xs delete-comment-button"><i class="icon-trash"></i></span>
</div>

CONTROLLER

'use strict';
soundshareApp.controller('CommentController', function($scope, $http) {

    $scope.data = { comments : [] }
    $scope.answers = [];
    $scope.state = {}
    $scope.project = { id : [] }
    $scope.username = null;

    $scope.loadComments = function(userName, urlName){
        $http({
            url: '/comment/by_project_id',
            method: "GET",
            params:
            {
                username: userName,
                urlname: urlName
            }
        }).success(function(data) {
            $scope.data.comments = data;
            console.log($scope.data.comments);//WORKING
        });;
    }

    $scope.addComment = function(commentData){
        if("undefined" != commentData.msg){
            commentData.msg = "@" + $scope.username + ": " + commentData.msg;
            $http({
                method : "POST",
                url : "/comment/addAnswer",
                params:
                {
                    comment: commentData.msg,
                    discussionId: commentData.discussionId,
                    projectId:commentData.projectId
                }
            }).success(function(data){
                $scope.answers.push(data);
                $('.show-hide').hide();
                $scope.commentData.msg = '';
            });
        }
    }

    $scope.setUsername = function(username){
        $scope.username = username;
    }

    $scope.deleteComment = function ( comment ) {
        console.log($scope.data.comments);//NOT WORKING
    };

});

0 个答案:

没有答案