AngularJS'de yayınlanan kapsam/yönerge üzerinden yayın alma ve denetleyici işlevlerini çağırma?

Question

Durumumu örnekleyen jsfiddle işte burada.

Her şeyden önce, alınan boyutlarla direktif oluşturmanın doğru yolu bu mu? Sonra, her yönerge diğerlerinden yalıtılmalıdır. Bu nedenle scope: {} kullanıyorum.

Ben Açısal için yeni .. ben bu önemsiz bir sorundur eminim

.. sorun .. denetleyicisi olan işlevler çağırıyor ve buna yayını ya almaz görünüyor :)

<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> 

kontrol:

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

I ng-tekrar bileşen bir sayıda yük olan bir sayfa

ve direktif:

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

denetleyici bağlantı işlevi önce yürütür, böylece yayın çok yakında gönderiliyor. Sen $timeout kullanarak bu geciktirebilirsiniz:

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

bir izolatı kapsamı ile bir direktif bir denetleyici yöntemini çağırmak için, bir argüman olarak yöntemini belirtmek gerekir:

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

ve kullanmak gerekir yönergede & sözdizimi:

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

o geri arama/kontrolör fonksiyonu parametrelerini geçmek için, doğru sözdizimini kullanmak gerekir: scope.localDirectiveName({arg1: ..., arg2: ...}). Turp, ben sadece bir argüman kullanılır ve yerine bir dizi iki parametre geçti:

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

fiddle