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在第一个$ broadcast之后注册了该监听器。

其他信息：第二个控制器中的所有内容都在 link：中完成，第二个指令在DOM中也是第二个。

问题：如何延迟第一次播放足够的$ on来注册听众？

修改在$ scope。$ on之前添加了console.log（“添加监听器”），并且在第一次$ 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作为此类媒介。

控制器仍然在第一个指令上注册监视，并且一旦获得相应的事件就将接收到的数据投入使用。

通过发送事件向第二个指令发出数据可用性信号。但是，第二个指令在启动时自行检查服务中的数据的可用性。

这样，第二个指令可以在发送一些数据后很长时间初始化，并且仍然可以对其进行操作。

Angularjs通过控制器将数据从一个指令发送到另一个指令

2 个答案: