AngularJS में पृथक दायरे/निर्देश से प्रसारण और कॉलिंग नियंत्रक कार्यों को प्राप्त करना?

Question

यहां jsfiddle मेरी स्थिति का उदाहरण है।

सबसे पहले, क्या प्राप्त आयामों के साथ निर्देश बनाने का यह सही तरीका है? फिर, प्रत्येक निर्देश दूसरों से अलग किया जाना चाहिए .. इसलिए मैं scope: {} का उपयोग कर रहा हूं।

समस्या कार्यों कि नियंत्रक में हैं बुला रहा है .. और यह प्रसारण या तो प्राप्त नहीं होता है लगता है ..

मुझे यकीन है कि यह एक छोटी सी समस्या है कर रहा हूँ .. मैं कोणीय करने के लिए नया हूँ :)

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

नियंत्रक लिंक समारोह से पहले निष्पादित करता है, तो अपने प्रसारण बहुत जल्दी बाहर भेजा जा रहा है। आप $timeout उपयोग करते हुए इस विलंब कर सकते हैं:

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

एक अलग क्षेत्र के साथ एक निर्देश से एक नियंत्रक विधि कॉल करने के लिए, आप एक तर्क के रूप विधि निर्दिष्ट करने की आवश्यकता:

<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' 
}, 

कि कॉलबैक/नियंत्रक कार्य करने के लिए पैरामीटर भेजने के लिए, आपको उचित सिंटैक्स का उपयोग करने की आवश्यकता है: 012,313,। बेला में, मैं केवल एक ही तर्क का इस्तेमाल किया है और इसकी जगह एक सरणी में दो पैरामीटर पारित कर दिया:

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

fiddle