正确编程AngularJS的方法

Question

我刚开始用angularJS编程，我有一个概念上的怀疑。我有一个名为＆＃34; Panel＆＃34;当点击其中一个指令元素时，可以调用一个模态。为此，我创建了一个名为uploadImage的指令，该指令接收启动模态的服务。

这是我的代码。

小组指令

    var panel = function($location, LxNotificationService){
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            panelData: "="
        },
        replace: true,
        template: '<div class="panel">' +
                    '<div class="card" ng-class="{\'editing-card\': edittingName}" ng-click="goToPanel(panelData.id, $event)">' +
                        '<div class="card__top">' +
                            '<lx-text-field class="card-title-input" label="Panel name" fixed-label="true" ng-click="$event.stopPropagation()" sync-focus-with="edittingName"><input type="text" ng-model="panelData.name" ng-model-options="{ updateOn: \'blur\' }" ng-keyup="onEnter($event)" ng-blur="onBlur()"></lx-text-field>' +
                            '<strong class="card-title">{{panelData.name}}</strong>' +
                            '<span ng-click="editName($event)" class="edit-panel-title-icon" lx-tooltip="Change panel name"><i class="icon icon--s icon--grey icon--circled bgc-black-2 mdi mdi--edit"></i></span>' +
                        '</div>' +
                        '<div class="card__content">' +
                            '<span ng-click="editImage($event)" class="edit-panel-image-icon" lx-tooltip="Change panel image">' +
                                '<i class="icon icon--l icon--grey icon--circled bgc-black-2 mdi mdi--insert-photo"></i>' +
                            '</span>' +
                        '</div>' +
                        '<div class="card__actions">' +
                            '<button class="btn btn--m btn--red btn--flat" lx-ripple ng-click="deletePanel(panelData.id, $event)">DELETE</button>' +
                        '</div>' +
                    '</div>' +
                    '<upload-image sync-modal-with="edittingImage"></upload-image>' +
                '</div>',
        link: function($scope, $element, attrs) {
            //Se ejecuta una vez y es la que nos permite trabajar sobre el DOM renderizado
        },
        controller: function($scope) {
            $scope.goToPanel = function(panelId, event) {
                $location.path('/panel/'+ panelId);
            };
            $scope.deletePanel = function(panelId, event) {
                if (!!event){
                    event.stopPropagation();
                }
                var deleteAccept = function(accept)
                {
                    if (accept){
                        $scope.$emit('deletePanel', this.panelData.id);
                    }
                };
                LxNotificationService.confirm('Delete panel', 'Are you sure you want to delete the panel "' + this.panelData.name + '"?', { cancel:'Cancel', ok:'Yes' }, angular.bind(this, deleteAccept));
            };
            $scope.onEnter = function(event) {
                var key = event.keyCode || event.which;
                if (key === 13){
                    event.stopPropagation();
                    this.disableEditName();
                }
            };
            $scope.onBlur = function() {
                this.disableEditName();
            };
            $scope.editName = function(event) {
                if (!!event){
                    event.stopPropagation();
                }
                this.enableEditName();
            };
            $scope.editImage = function(event) {
                if (!!event){
                    event.stopPropagation();
                }
                this.enableEditImage();
            };
            $scope.enableEditName = function() {
                this.edittingName = true;
            };
            $scope.disableEditName = function() {
                this.edittingName = false;
            };
            $scope.enableEditImage = function() {
                this.edittingImage = true;
            };
            $scope.disableEditImage = function() {
                this.edittingImage = false;
            };
        }
    };
};

UploadImage指令

    var uploadImage = function(LxDialogService){
    return {
        restrict: 'E',
        scope: {
            edittingStatus: "=syncModalWith"
        },
        template: '<lx-dialog class="dialog dialog--l" id="modal-{{$id}}" onclose="onClose()">' +
                      '<div class="dialog__header">' +
                            '<div class="toolbar bgc-light-blue-500">' +
                                '<span class="toolbar__label tc-white fs-title">' +
                                    'Lorem Ipsum' +
                                '</span>' +
                                '<div class="toolbar__right">' +
                                    '<button class="btn btn--l btn--white btn--icon" lx-ripple ng-click="addPerson()">' +
                                        '<i class="mdi mdi--add"></i>' +
                                    '</button>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +
                        '<div class="dialog__content"></div>' +
                        '<div class="dialog__actions">' +
                            '<button class="btn btn--m btn--black btn--flat" lx-ripple lx-dialog-close>Cancel</button>' +
                        '</div>' +
                   '</lx-dialog>',
        link: function($scope, $element, attrs)
        {
            $scope.$watch("edittingStatus", function(currentValue, previousValue) {
                if (currentValue === true && !previousValue) {
                    $scope.open();
                } else if (currentValue === false && previousValue) {
                }
            });
        },
        controller: function($scope) {
            $scope.open = function(){
                LxDialogService.open("modal-"+$scope.$id);
            };

            $scope.close = function(){
                LxDialogService.close("modal-"+$scope.$id);
            };

            $scope.onClose = function(){
                $scope.edittingStatus = false;
            };
        }
    };
};

为了同步两个指令，我使用了panel指令的scope属性。这是一个好方法吗？我应该使用服务而不是指令来启动模式吗？

提前致谢。