$ scope。$ on events多次触发

时间:2014-11-28 09:16:14

标签: angularjs angularjs-directive

我想要做的是将一条消息从MyCtrl2广播到MyCtrl2,这样可以正常工作。但是我有一个在多个地方运行的指令,该指令需要标记中的属性值和MyCtrl1中的范围变量。所以我找到的一个解决方案是添加'控制器:" MyCtrl1"'在指令本身访问范围,但这会导致广播消息事件在MyCtrl1中多次触发。

<div ng-controller="MyCtrl1">
    Breadcast message: {{ message }}
    <br /><br />
    <div my-directive="test1"></div>
    <div my-directive="test2"></div>
</div>

<div ng-controller="MyCtrl2">
    <input type="text" name="message" ng-model="message" />
    <button class="btn btn-primary" ng-click="doBroadcast()">Broadcast</button>

    <br >
    <div my-directive="test3"></div>
    <div my-directive="test4"></div>
</div>



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

myApp.directive('myDirective', function() {
    return {
        restrict: 'A',
        controller: 'MyCtrl1', 
        link: function (scope, element, attrs, ctrl) {
            element.html(attrs.myDirective + ' - ' + scope.variable);
        }
    };
});

myApp.controller('MyCtrl1', function($scope) {

    $scope.variable = "MyCtrl1 Variable";

    $scope.$on('message', function ($event, message) {
        console.log("message recieved");
        $scope.message = message;
    });

});

myApp.controller('MyCtrl2', function($scope, $rootScope) {

    $scope.doBroadcast = function() {
        console.log('broadcast message');
        $rootScope.$broadcast('message', $scope.message);
    }

});

在没有触发$ events的情况下,指令中的MyCtrl1范围有更好的方法吗?

小提琴:http://jsfiddle.net/oligustafsson/j11y3xxp/

1 个答案:

答案 0 :(得分:2)

指令的控制器是MyCtrl1,因此在运行时生成多个控制器对象,每个控制器都捕获该消息。 删除controller: 'MyCtrl1',行或使用指令的其他控制器。

<强>更新 可以使用服务在控制器之间共享数据。查看小提琴的更新版本:http://jsfiddle.net/zunehfaa/