Góc 1,5, Gọi một chức năng trong một bộ phận từ Bộ điều khiển chính

Question

Các thành phần góc 1,5 dễ dàng cho phép tạo cuộc gọi lại cho phụ huynh từ thành phần. Có cách nào tôi có thể gọi một chức năng trong một thành phần từ một chức năng trong bộ điều khiển của cha mẹ?

Cho phép nói thành phần của tôi được gọi là nhiệm vụ và dưới đây là HTML cho nó trong vùng chứa chính.

<task-runner taskcategogyid=5></task-runner> 

<button type="button" ng-click="doSomethingInParent()">ParentToChildButton</button> 

Plunkr là here. Tôi muốn rằng khi ParentToChildButton được nhấp, hàm doSomethingInParent() gọi hàm remotefunc trong thành phần.

Answer 1

Một vài cách khác nhau:

1. Vượt qua một đối tượng như một thuộc tính với hai chiều ràng buộc (scope:{myattr:'='}) để chỉ thị nhiệm vụ mục-tiêu đề mà chỉ sau đó có thể thêm một chức năng để cho bộ điều khiển cha mẹ để gọi.
2. Đặt thuộc tính có liên kết một chiều (scope:{myattr:'@'}) trên đó và sau đó attrs.$observe thay đổi đối tượng để kích hoạt hành động hoặc liên kết hai chiều (scope:{myattr:'='}) và sau đó $scope.$watch thay đổi để kích hoạt hành động.
3. Chỉ thị nâng một sự kiện (scope:{raiseLoaded:'&onLoaded'}) chuyển một đối tượng đại diện cho một đối tượng điều khiển từ xa với phương thức kích hoạt hành động bạn muốn. Để tăng sự kiện, bạn sẽ gọi một cái gì đó như raiseLoaded({remoteControl: remoteControlObj}) trong chỉ thị và sau đó để nghe sự kiện, bạn sẽ sử dụng <task-item-header on-loaded="setRemote(remoteControl)"> giả sử bạn có phương thức setRemote() trên bộ điều khiển chính.

Cập nhật Tôi chỉ nhận ra câu hỏi của bạn là cho một phiên bản mới hơn của AngularJS, vì vậy tôi không chắc chắn nếu câu trả lời của tôi vẫn còn được áp dụng. Tôi sẽ để nó ở đây bây giờ, nhưng nếu bạn thấy nó không phải là hữu ích tôi có thể xóa nó.

Answer 2

Tôi cần một cái gì đó như thế này trước đây vì vậy tôi nghĩ rằng tôi sẽ chia sẻ cách tôi giải quyết vấn đề này.

Tương tự như OP, tôi cần phải một cách tự do các phương thức kích hoạt trong thành phần con từ thành phần chính. Tôi muốn có thể kích hoạt phương thức này trong phụ huynh một cách tự do/riêng biệt mà không cần sử dụng móc vòng đời $ onChanges. Thay vào đó, tôi đã tạo cơ chế đăng ký thông báo để cho phép thành phần con 'đăng ký' phương thức với cha mẹ khi được tải. Phương thức này sau đó có thể được tự do kích hoạt bởi cha mẹ bên ngoài chu kỳ $ onChanges.

Tôi đã tạo một codepen để minh họa điều này. Nó có thể dễ dàng mở rộng để xử lý các loại thông báo khác nhau từ cha mẹ không liên quan đến các thay đổi dữ liệu.

index.html

<div ng-app="tester"> 
    <parent></parent> 
</div> 

Script.js

angular.module('tester', []); 

angular.module('tester').component('parent', { 
    controller: parentController, 
    template: ` 
    <div class="tester-style"> 
     <button ng-click="$ctrl.notifyChild()">Notify child</button> 
     <child parent-to-child-notification-registration="$ctrl.childComponentNotificationRegistration(handler)"> 
    </div> 
    ` 
}); 

function parentController() { 
    let childComponentEventHandler = null; 

    this.$onInit = function() { 
    this.value = 0; 
    }; 

    this.childComponentNotificationRegistration = function(handler) { 
    childComponentEventHandler = handler; 
    console.log('Child component registered.'); 
    }; 

    this.notifyChild = function() { 
    if (childComponentEventHandler) { 
     childComponentEventHandler(this.value++); 
    } 
    }; 
} 

angular.module('tester').component('child', { 
    bindings: { 
    parentToChildNotificationRegistration: '&', 
    }, 
    controller: childController, 
    template: ` 
    <div class="tester-style"> 
     <h4>Child Component</h4> 
    </div> 
    ` 
}); 

function childController() { 
    this.$onInit = function() { 
    this.parentToChildNotificationRegistration({ 
     handler: this.processParentNotification 
    }); 
    }; 

    this.processParentNotification= function(parentValue) { 
    console.log('Parent triggered child notification handler!!!'); 
    console.log('Value passed to handler:', parentValue); 
    }; 
}; 

}

Cũng cho một cái gì đó tương tự như @adam0101 's # 3 câu trả lời thấy codepen.