2015-10-14 88 views
1

我工作的一個項目,我有一個控制器和兩個指令,我需要共享它們之間的所有範圍的共享,我已經創建plnkr here.角指令範圍兩者之間的指令

的代碼結構如下:

Main Controller

--Drawable Directive

----Draw-rectangle Directive

Main ctrl有一個對象rois的範圍,我對DrawableDraw-rectangle指令。並在可繪製點擊它更新到主控制器的範圍,但是當我點擊繪製矩形指令它不更新範圍。

我希望所有的(3)作用域使用雙向數據綁定進行同步。

它似乎在概念上是正確的,但它爲什麼不從Draw-rectangle指令更新範圍?

在此先感謝!

回答

1

當你點擊「繪製矩形」你也點擊「繪製」,因爲「繪製矩形」裏面「繪製」。您必須使用event.preventDefault();停止從「繪製矩形」到「可繪製」的傳播。爲便接踵而來:

var app = angular.module('myApp', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.rois = [{ 
 
    name: 'Jack', 
 
    city: 'pune' 
 
    }, { 
 
    name: 'Tony', 
 
    city: 'Mumbai' 
 
    }]; 
 
    $scope.test = "Test"; 
 
}); 
 

 
app.directive('drawable', [ 
 
    function() { 
 
    return { 
 
     restrict: "EA", 
 
     link: function(scope, element, attrs) { 
 
     element.on('click', function(event) { 
 
      event.preventDefault(); 
 
      scope.rois = [{ 
 
      name: 'Stark', 
 
      city: 'pune' 
 
      }, { 
 
      name: 'Inc', 
 
      city: 'Mumbai' 
 
      }]; 
 
      scope.$apply(); 
 
      console.log(scope.rois); 
 
     }); 
 
     } 
 
    }; 
 
    } 
 
]); 
 

 
app.directive('drawRectangle', [ 
 
    function() { 
 
    return { 
 
     restrict: "EA", 
 
     link: function(scope, element, attrs) { 
 
     element.on('click', function(event) { 
 
      event.stopPropagation(); // STOP PROPAGATION 
 
      event.preventDefault(); 
 
      scope.rois = [{ 
 
      name: 'Meuk', 
 
      city: 'pune' 
 
      }, { 
 
      name: 'Tony', 
 
      city: 'Mumbai' 
 
      }]; 
 
      scope.$apply(); 
 
      console.log(scope.rois); 
 
     }); 
 
     } 
 
    }; 
 
    } 
 
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller='MainCtrl' style='width: 400px;height: 400px;border: 1px solid red;'> 
 
    <div drawable rois="rois" style='width: 300px;height: 300px;border: 1px solid red;'> 
 
    <div draw-rectangle rois="rois" style='width: 200px;height: 200px;border: 1px solid red;'> 
 
     <button type="button" style='margin: 20px; border: 1px solid red;'>Click me!</button> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br>{{rois | json}} 
 
</div>

0

您正在使用兩個指令的隔離範圍。隔離範圍將創建一個子範圍。所以,你不能從指令的鏈接函數中訪問「rois」。 嘗試刪除隔離的範圍後,

scope: { 
    rois: '=' 
}, 
1

u需要停止冒泡的事件,因爲當RECT指令點擊,繪製也觸發點擊!使用event.stopPropagation()

var app = angular.module('myApp'); 
 
app.directive('drawable', ['$document', 
 
    function($document) { 
 
    return { 
 
     restrict: "EA", 
 
     scope: { 
 
     rois: '=' 
 
     }, 
 
     link: function(scope, element, attrs) { 
 
     console.log(scope.rois); 
 

 
     element.on('click', function(event) { 
 
      event.stopPropagation(); 
 
      scope.rois = [{ 
 
      name: 'Stark', 
 
      city: 'pune' 
 
      }, { 
 
      name: 'Inc', 
 
      city: 'Mumbai' 
 
      }]; 
 
      scope.$apply(); 
 

 
      console.log(scope.rois); 
 
     }); 
 
     } 
 
    }; 
 
    } 
 
]); 
 

 
app.directive('drawRectangle', ['$document', 
 
    function($document) { 
 
    return { 
 
     restrict: "EA", 
 
     scope: { 
 
     rois: '=' 
 
     }, 
 
     link: function(scope, element, attrs) { 
 
     element.on('click', function(event) { 
 
      event.stopPropagation(); 
 
      scope.rois = [{ 
 
      name: 'Meuk', 
 
      city: 'pune' 
 
      }, { 
 
      name: 'Tony', 
 
      city: 'Mumbai' 
 
      }]; 
 
      scope.$apply(); 
 
      console.log(scope.rois); 
 
     }); 
 
     } 
 
    }; 
 
    } 
 
]);