Ricezione di broadcast e chiamata alle funzioni del controller da ambito/direttiva isolati in AngularJS?

Question

Ecco lo jsfiddle che esemplifica la mia situazione.

Prima di tutto, è questo il modo corretto di creare direttive con le dimensioni ricevute? Quindi, ogni direttiva dovrebbe essere isolata dalle altre .. quindi sto usando scope: {}.

Il problema sta chiamando le funzioni che sono nel controller .. e pare che non riceve la trasmissione sia ..

Sono sicuro che questo è un problema banale .. Sono nuovo di angolare :)

ho una pagina in cui carico un numero di componenti con 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> 

Il controllore:

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"); 
    }; 
}). 

e la direttiva:

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

Il controllore esegue prima che la funzione di collegamento, quindi la trasmissione viene inviato troppo presto. È possibile ritardare questo usando $timeout:

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

di chiamare un metodo di controllo da una direttiva con un ambito isolato, è necessario specificare il metodo come argomento:

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

ed è necessario utilizzare il & sintassi nella direttiva:

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

per passare parametri a quella funzione di callback/regolatore, è necessario utilizzare la sintassi corretta: 012.313.. Nel violino, ho usato solo argomento, e superato i due parametri in un array invece:

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

fiddle