AngularJS通過控制器將數據從一個指令發送到另一指令

Question

目前，我有兩個指令和父控制器，都以某種形式存在。

我想實現類似“相關領域”的功能。 也就是說，一個指令中的數據最好通過控制器傳遞給另一個指令，這樣我就可以在字段之間“路由”數據時具有足夠的靈活性。

所以我有這個設置：

Controller:
$scope.$watch('form.model.object', function (newValue, oldValue) {
    $scope.$broadcast("cmsRelatedChanged", {key: 'subcarriers', value: newValue['@identity']});
};

Second directive:
$scope.$on('cmsRelatedChanged', function(event, aditionalData) {
    $scope.related[aditionalData.key] = aditionalData.value;
    console.log("[CMSCollectionDirective] updated with: ", aditionalData, " event: ", event);
});

表單中預先填充了現有對象時，第一次無法使用，但是隨后在瀏覽器工作中進行了更改。

好像第二條指令$ on在進行第一個$廣播之后注冊了該偵聽器。

附加信息：第二個控制器中的所有操作都在link：中完成，第二個指令在DOM中也是第二個。

問題：如何延遲第一次廣播以使$ on足以注冊偵聽器？

編輯：在$ scope。$ on之前添加了console.log（“ Adding listener”），並且在第一個$ broadcast 之后快速執行了它，這就是為什么它不咳嗽的原因。

Answer 1

也許不要使用$ broadcast和$ on。 對我而言，此解決方案可在指令之間共享數據：

JS：

app
    .controller('MainCtrl', function () {
        $scope.sharedData = {
            data: 1
        };

        $scope.testAction = function () {
            vm.sharedData.data++;
        }
    })
    .directive("dirFirst", function () {
        var directive = {
            link: link,
            restrict: 'AE',
            scope: {
                sharedData: '='
            }
        };
        return directive;

        function link(scope, element) {
            scope.$watch(function () {
                return scope.sharedData.data;
            }, function () {
                console.log("dirFirst: " + scope.sharedData.data)
            });

            element.on('click', function () {
                scope.sharedData.data++;
                console.log(scope.sharedData.data);
            });
        }
    })
    .directive("dirSecond", function () {
        var directive = {
            link: link,
            restrict: 'AE',
            scope: {
                sharedData: '='
            }
        };
        return directive;

        function link(scope, element) {
            scope.$watch(function () {
                return scope.sharedData.data;
            }, function () {
                console.log("dirSecond: " + scope.sharedData.data)
            });

            element.on('click', function () {
                scope.sharedData.data++;
                console.log(scope.sharedData.data);
            });
        }
    });

HTML用法：

<button dir-first shared-data="sharedData">
    Directive1
</button>
<button dir-second shared-data="sharedData">
    Directive2
</button>

<button ng-click="testAction()">ControllerAction</button>

Answer 2

我的問題中最大的問題最終是指令初始化的順序以及無法使用$ scope作為控制器和第二個指令之間的傳輸介質。

解決方案是將service用作此類介質。

控制器仍在第一指令上注冊監視，並且一旦它得到相應的事件就將接收到的數據投入使用。

通過發出事件，將數據可用性指示給第二指令。 但是，第二個指令在啟動時會自行檢查服務中數據的可用性。

這樣，可以在發送一些數據很長時間后初始化2nd指令，並且仍然對其執行操作。