Nhận các chức năng phát và gọi điều khiển từ phạm vi/chỉ thị riêng biệt trong AngularJS?

Question

Đây là số jsfiddle minh họa tình huống của tôi.

Trước hết, đây có phải là cách chính xác để tạo chỉ thị với thứ nguyên nhận được không? Sau đó, mỗi chỉ thị nên được phân lập từ những người khác .. vì vậy tôi đang sử dụng scope: {}.

Vấn đề đang kêu gọi các chức năng có trong bộ điều khiển .. và có vẻ như nó không nhận được phát sóng trong hai ..

Tôi chắc chắn đây là một vấn đề tầm thường .. Tôi mới vào góc :)

tôi có một trang mà tôi tải một số thành phần với 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> 

Bộ điều khiển:

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

và chỉ thị:

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

Bộ điều khiển thực thi trước khi chức năng liên kết, vì vậy phát sóng của bạn đã được gửi đi quá sớm. Bạn có thể trì hoãn này bằng $timeout:

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

Để gọi một phương thức điều khiển từ một chỉ với một phạm vi cô lập, bạn cần phải xác định phương pháp như một cuộc tranh cãi:

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

và bạn cần phải sử dụng & cú pháp trong chỉ thị:

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

để truyền tham số cho rằng hàm callback/điều khiển, bạn cần phải sử dụng cú pháp thích hợp: 012.313.. Trong fiddle, tôi chỉ sử dụng một đối số, và thông qua hai tham số trong một mảng thay vì:

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

fiddle