angularjs - 从 AngularJS 中的隔离范围/指令接收广播和调用 Controller 函数？

Question

这是jsfiddle举例说明我的情况。

首先，这是使用接收到的维度创建指令的正确方法吗？
然后，每个指令都应该与其他指令隔离。因此我使用 scope: {} .

问题是调用 Controller 中的函数..而且它似乎也没有收到广播..

我确定这是一个微不足道的问题..我是 Angular 的新手:)

我有一个页面，我在其中使用 ng-repeat 加载了许多组件:

<div ng-app="test">
    <div ng-controller="containerCtrl">
        <component ng-repeat='c in components' id="c.id" my-width="{{c.width}}" my-height="{{c.height}}">
    </div>
</div>

Controller :

controller('containerCtrl', function ($scope) {
    $scope.components = [{ id: "c1", width: 100, height: 100 },
                        { id: "c2", width: 200, height: 100 },
                        { id: "c3", width: 300, height: 100 }];

    //in the actual controller I am using a socket provider and doing
    //socket.forward([
    //        'initPage',
    //        'refreshPage'
    //    ], $scope);
    //simulating it with a simple broadcast here..
    $scope.$broadcast("onSomething", "");

    $scope.doSomething = function (data) {
        alert("doing something");
    };
}).

和指令:

directive('component', function () {
        var linkFn = function(scope, element, attrs) {
            $(element).
                resizable({
                    stop: function( event, ui ) {
                        scope.emitSomething(attrs.id, ui.position);
                    }
                });

            scope.$on('onSomething', function(res) {
                alert("onSomething!");
            });
        };

        return {
            restrict: 'E',
            template: '<div class="ui-widget-content" style="width: {{width}}px; height: {{height}}px;"></div>',
            replace: true,
            scope: {
                width:'@myWidth',
                height:'@myHeight'
            },
            link : linkFn
        };
    });

Answer 1

Controller 在链接函数之前执行，所以你的广播发送得太快了。您可以使用 $timeout 延迟此操作:

$timeout(function() {
    $scope.$broadcast("onSomething", "");
});

要从具有隔离范围的指令调用 Controller 方法，您需要将该方法指定为参数:

<component ng-repeat='c in components' id="c.id" my-width="{{c.width}}" 
 my-height="{{c.height}}" callbk="doSomething(data)">

并且您需要使用 &指令中的语法:

scope: {
    width: '@myWidth',
    height: '@myHeight',
    emitSomething: '&callbk'
},

要将参数传递给该回调/ Controller 函数，您需要使用正确的语法: scope.localDirectiveName({arg1: ..., arg2: ...}) .在 fiddle 中，我只使用了一个参数，而是将两个参数传递到一个数组中:

$(element).resizable({
   stop: function (event, ui) {
      scope.emitSomething({data: ["id", "position"]});
   }
});

fiddle