将范围通信从指令隔离到指令？

Question

我是 AngularJS 的新手，对指令概念感到困惑。 我正在通过 $scope.delete 函数在我的第二个指令中更新 scope.markers 但更改并未反映在第一个指令上，因为我使用的是双向数据绑定隔离范围，所以它应该反映。任何解决方案都会有很大帮助。

我的第一个指令是：

app.directive('damageDiagram', function () {
  return {
    retrict: 'AE',
    scope: {
      imgsrc: '=', markers: '=', pointsrc: '=', dtype:'='
    },
    templateUrl: 'app/components/inspections/damage-diagram.html',
      link: function (scope, element, attrs) {            
    }
  }
});

第二个指令为：

 app.directive('damageMarker', function ($mdDialog,inspectionService,$timeout) {
    return {
        restrict: 'AE',
        require: '?^damageDiagram',
        scope: {
            marker: '=',
            pointsrc: '=',
            dtype:'=',
            markers: '='
        },
        template: '<img ng-src="{{pointsrc}}" />',
        link: function (scope, elem, attr) {
            elem.on("click",function(e){                
                showDialog();
                function showDialog($event) {
                   var parentEl = angular.element(document.body);
                   $mdDialog.show ({
                     parent: parentEl,
                     targetEvent: $event,
                     template:
                      '<form name="clientForm" novalidate >'+
                       '<md-dialog aria-label="List dialog">' +
                       '  <md-dialog-content>'+                           
                            '<md-input-container>'+
                              '<md-select ng-model="dtypeValue" class="dialog-close" placeholder="Select dtype">'+
                                '<md-option ng-repeat="opt in dtype">{{opt}}</md-option>'+
                              '</md-select>'+
                            '</md-input-container>'+
                            '<md-input-container class="md-block">'+
                                '<label>Comment</label>'+
                                '<input  required name="name" ng-model="comment" class="dialog-close">'+
                                '<div ng-messages="clientForm.name.$error">'+
                                    '<div ng-message="required">This is required.</div>'+                                    
                                '</div>'+
                            '</md-input-container>'+
                       '  </md-dialog-content>' +
                       '  <div class="md-actions" layout="row" layout-align="end center">' +
                       '    <md-button ng-click="closeDialog()" class="md-primary">' +
                       '      Close' +
                       '    </md-button>' +
                           '<md-button ng-disabled="clientForm.$invalid" ng-click = "save()" class="md-primary">'+
                                'Save'+
                            '</md-button>'+
                            '<md-button ng-disabled="clientForm.$invalid" ng-click = "delete()" class="md-primary">'+
                                'Delete'+
                            '</md-button>'+
                       '  </div>' +
                       '</md-dialog>'+
                       '</form>',                     
                     controller: DialogController
                  });
                  function DialogController($scope, $mdDialog) {
                    $scope.dtypeValue = scope.dtype[scope.marker.dtype.toUpperCase()];
                    $scope.dtype = scope.dtype;
                    $scope.comment = scope.marker.comment;
                    $scope.marker = scope.marker;
                    $scope.closeDialog = function() {
                      $mdDialog.hide();
                    }
                    $scope.save = function(){                        
                        console.log($scope.marker.id);
                        console.log($scope.dtypeValue);
                        console.log($scope.comment);
                        var dataSend = {};
                        dataSend.id = $scope.marker.id;
                        dataSend.comment = $scope.comment;
                        for(var key in $scope.dtype) {
                            if($scope.dtype[key] == $scope.dtypeValue) {
                                dataSend.dtype = key;
                            }
                        }
                        inspectionService.updateDiagram(dataSend).then(function(response){
                            console.debug("response ; "+response);
                            $mdDialog.hide();                            
                            scope.marker.id = response.id;
                            scope.marker.comment = response.comment;
                            scope.marker.dtype = response.dtype;
                        });
                    }
                    $scope.delete = function(){
                        var dataSend = {};
                        dataSend.id = $scope.marker.id;      
                        var param = {};
                        param.inspection=$scope.marker.inspection;                                          
                        inspectionService.deleteDiagramMarker(dataSend).then(function(response){                                                                                    
                            inspectionService.getDiagram(param).then(function(response){                            
                                $timeout(function() {
                                    scope.$apply(function(){
                                       scope.markers = response.results;
                                  })                                  
                                },2000);                                                                
                                console.debug("response ; "+response);
                                $mdDialog.hide();
                            });       
                        });
                    }

                  }
                }
            });
            console.log(scope.marker.top, scope.marker.left, elem);
        }
    }
});

我的损坏图指令的html代码如下：

<damage-diagram imgsrc="imgsrc" pointsrc="pointsrc" dtype="dtype"
  markers="inspection.damage_diagram">
</damage-diagram>

我的损坏指令的 html 代码如下：

<div style="position:relative">
    <img id="23467129" ng-src="{{imgsrc}}" style="position:relative" width="100%" />
    <div ng-repeat="marker in markers"
         marker="marker"
         markers="markers"
         dtype="dtype"
         pointsrc="pointsrc"
         damage-marker>
    </div>    
</div>

控制器如下：

app.controller('InspectionDetailCtrl', ['$scope', 'inspectionService', '$stateParams', 'Restangular','$rootScope',
    function ($scope, inspectionService, $stateParams, Restangular, $rootScope) {
        $scope.updateDamageImage = {};
        $scope.insp_id = $stateParams.inspId;
        $scope.damageImagesShow = false;
        $scope.comments = [];
        $scope.types = [];
        $scope.selectTypeDelete = false;
        $scope.commentDelete = false;
        $scope.selectTypeDeleteBefore = true;
          $scope.commentDeleteBefore = true;

        init($scope.insp_id);
        console.log("Fetching details for scope", $scope.insp_id);
        function init(insp_id)
        {
            inspectionService.inspections.customGET(insp_id, {type: 'full'})
            .then(function (data) {
                $scope.inspection = data;
            }, function (err) {
                $scope.inspection = null;
            });
        }        
        $scope.pointsrc="app/components/inspections/pointer.png";
        $scope.dtype = {
            'S': 'Scratch (minor)',
            'DS': 'Deep Scratch',
            'D': 'Dents',
            'WD': 'Wheel Damage',
            'CW': 'Cracked Window',
            'FT': 'Flat Tire',
            'BL': 'Broken (lights)'
        };
    }]);

Answer 1

首先，指令中的两种方式绑定不起作用，因为主控制器中反映的任何更改都可以在指令中看到，但不是其他方式，指令中的任何更改都不会反映在主控制器中。

但是有一个解决方案你可以在主控制器中创建一个对象

var x={};
x.value='to be passed in directive'

然后你在指令中使用相同的变量，因为只有一次对象实例被创建，所以任何指令中的任何更改都将反映在任何地方。