沟通具有隔离范围的两个相同的指令

Question

我是angularjs的新手，我有一个自定义指令，它具有隔离范围。我有两个相同的指令实例之间的沟通问题。 我该怎么做？您的建议非常感谢。

<div date-control="cal1" ng-model="mydate" calendar-properties="calendarProperties1"></div> 
<div date-control="cal2" ng-model="mydate2" calendar-properties="calendarProperties2"></div> 

我想要做的就是打开这两个日期控制在一次有使用一些数据共享或任何东西“到”和“从”在日历属性的属性？你可以检查这个plnkr sample。

Answer 1

您可以将此信息直接存储在服务中，也可以让指令相互通信。在这种情况下，我会让他们沟通。

将起作用的一个选项是使用.$broadcast发送来自$rootScope的消息，然后使用.$on接收该消息。

例子：里面你的“从”指令

// Once "From" date is selected 
$rootScope.$broadcast('from:set', date); 

然后，你的“要”指令内

scope.$on('from:set', function (event, data) { 
    console.log(data); // Will log "From" date 
}); 

有很多不同的方法可以做到这一点，将工作（如你可以把它们都放在$rootScope上，或者你可以让它们的.$emit向上而不是.$broadcast向下），所以在你的情况下使用你觉得最有意义的东西。

有关于这个问题在这里一个伟大的博客文章：http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Answer 2

指令只是作为任何你用它来创建你的指令的variantes的函数调用

angular.directive('myDir',function(){ 
    var common; 
    return directiveObject; 
}); 

directiveObject的结果。重要的是，在返回之前，你可以声明通用的（如果你愿意的话）变量和方法，可以检查变化或调用，所以你可以做类似于

app.directive('myDir',function(){ 
    var bus={ 
    value1:0 
    }; 

    function increase(){ 
    bus.value1++; 
    } 

    return { 
    scope:{}, 
    template:"<div><h1>{{counter}}</h1><button ng-click="increase()">add</button></div>" 
    controller:function($scope){ 
     $scope.bus=bus; 
     $scope.increase = increase 
     $scope.$watch('bus',function(){ 
     //something here 
     }) 
    } 
    }; 
}); 

这个样本可以在这里找到。这可以通过多种方式形成 http://plnkr.co/edit/d9dpIYCAjOaOBNjoI80u?p=preview

其他一些方法可以用于发射和广播事件，甚至使用服务，但我喜欢这种方法的简单性。

Answer 3

你基本上是试图在不同的$范围内共享数据。你会得到很多建议，关于存储在$ rootScope，$ broadcast中，但是这些解决方案并不是最佳的，因为他们做这项工作但是有开销。

创建服务，并存储性能“到”和“从”进入该服务，然后注入该服务到您的指令..

http://plnkr.co/edit/xJrBneiU8RU92czHAZ43?p=preview

.service("MyService", function(){ 
    var from = 'Cal1'; 
    var to = 'Cal1'; 
    return {from:from, to:to}; 
}) 
.controller('DatepickerDemoCtrl', function ($scope, MyService) { 


    $scope.calendarProperties1 = { 

     format: "yyyy-MM-dd", 
     label: "Enter the Date From", 
     from: MyService.from, 
     opened:false 
    } 

    $scope.calendarProperties2 = { 
     format: "yyyy/MM/dd", 
     label: "Enter the Date To", 
     to: MyService.to, 
     opened: false 
    } 

}) 

在这个例子中，你会能够看到我们如何在指令中使用服务变量...使用此解决方案将解决您的问题

**编辑，我已编辑您的plunker代码，以修改日历属性对象以使用服务中的数据。现在这两个日历属性对象将从相同的服务变量中获取数据..我希望这可以解决您的问题

Answer 4

我想感谢大家的回答和提供一些建议。如果我想通过一个指令与另一个指令进行通信我将通过使用.scope（）方法来检索指令的作用域以调用或共享/获取另一个指令的数据。可能有其他的方式，但我只是角度的新手，我用这种方式来访问指令之间的方法和数据。