Question

是否有一种模式或最佳实践方法来传播事件或通过Angular 1.x中的嵌套组件进行更改？

例如假设我们在以下布局中有自定义组件/指令

<my-container>
    <main-area>
        <nav-bar></nav-bar>
        <work-area></work-area>
    </main-area>
    <side-panel></side-panel>
</my-container>

如果导航栏包含按钮，其中一些按钮将在侧面板中执行操作，那么我可以看到两个选项

创建一个服务，其中包含按钮选项的状态并将其注入所需的位置
使用单向数据绑定来调用父组件中将改变该父组件中的值的函数。

e.g。

<nav-bar onButtonPress="changeValue()">

changeValue（）函数位于主区域的控制器

我想尝试避免$ watches / $ emits等，并保持已知组件的内部状态，并使用明确定义的输入/输出隔离范围

谢谢！

Answer 1

$broadcast通过范围向下发送消息，其中$emit通过范围向上发送消息。

如果你没有在你的指令上使用双向绑定。

所以你会有;

app.controller('MainArea', function($scope) {
    $scope.model = {};
    $scope.model.changeValue = function(){
        // do stuff in this function
    }
});

app.directive('mainArea', function() {
    return {
        restrict: 'E',
        controller: "MainArea"
    }
});

app.directive('navBar', function() {
    return {
        restrict: 'E',
        scope: {
            model: "=ngModel"
        },
        link: function(scope, el, attrs) {
            scope.changeValue = scope.model.changeValue;
        }
    }
});

那么你的HTML就是;

<main-area>
    <nav-bar ng-model="model" ng-click="changeValue">
</main-area>

这样的事情。 我匆忙，所以它是代码的粗略轮廓。它背后的前提是基本上使用2路/ 1路方式绑定，因此您可以从父控制器/指令传递功能。

AngularJS通过嵌套组件传播更改

1 个答案: