Angular：將函數從子級綁定到父級

Question

通常我們給一個子指令一個回調函數，它可以在發生某些事情時調用它。 就我而言，情況正好相反； 我想通知指令有關的事情。 我仍在使用 angular 1.4（但很快我將移至 1.5 並最終移至 2）。 考慮到這一點，我想避免諸如$watch和$broadcast類的東西。

所以，我認為有兩種解決方案：1）使用服務 2）將回調函數從子級綁定到父級

1) 雖然這可能是首選的解決方案，但我看到了兩個問題 a) 為這樣一個簡單的任務提供完整的服務 b) 你需要$watch來檢測變化

2）好吧，這個解決方案聽起來超級簡單，但它似乎比我預期的要復雜，或者甚至不可能:(

這是我的測試代碼：

<button ng-click="mycontroller.callback()">Click me</button> 
<bar-foo activate-me="mycontroller.callback"></bar-foo>

所以， mycontroller沒有函數callback ，但指令bar-foo有

angular.module('HelloApp')
    .directive('barFoo', function () {
        return {
            restrict: 'E',
            scope:{
                activateMe: '='
            },
            controller: function ($scope) {
                $scope.activateMe = function () {
                    this.activated = true
                }
            },
            template: '<p ng-if="activated">Activated</p>'
        }
    });

演示

我正在嘗試的可能嗎？ 或者我應該接受services是解決這個問題的唯一方法還是有更多方法？

Answer 1

我覺得你在這里想得太難了。 雖然可以給外部控制器一個函數來直接調用和通知指令（你不應該這樣做），但更直接和自然的方法是使用輸入綁定。 在您的情況下，它將非常簡單：

 angular.module('HelloApp', []).controller("MyCtrl", function($scope) { this.callBarFoo = function() { this.callback = true; } }); angular.module('HelloApp') .directive('barFoo', function() { return { restrict: 'E', scope: { activateMe: '=' }, controller: function($scope) { }, template: '<p ng-if="activateMe">Activated</p>' } })

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="HelloApp" data-ng-controller="MyCtrl as mycontroller"> <button ng-click="mycontroller.callBarFoo()">Click me</button> <bar-foo activate-me="mycontroller.callback"></bar-foo> </div>

一般來說，控制器應該在適當的時候讓指令知道數據。 這是推薦的數據流方向：從控制器 -> 到指令。 指令永遠不應該要求數據本身。 控制器決定何時以及將什么傳遞給指令。 當指令可能需要一些數據時，可以使用雙向綁定。

相關閱讀我整理在這里。

Answer 2

我知道的另一種方法是將一些 id 附加到指令根元素。 然后從你的控制器你可以這樣做。

angular.element(document.getElementById('the-id')).scope().directiveFunction(args);