AngularJS通过嵌套组件向上传播更改

Question

Is there a pattern or best practice method to propagate events or changes up through nested components in Angular 1.x?

for eg say we have custom components/directives in the following layout

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

If the nav-bar contains buttons and some of those buttons will perform actions in the side panel then I can see two choices

1. Create a service that holds the state of the button options and inject it where it's needed
2. Use a one-way data bind that calls a function in the parent component that will alter the value in that parent.

eg

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

The changeValue() function is in the main-area's controller

I'd like to try to avoid $watches/$emits etc and keep the internal state of the components known and the scopes isolated with clearly defined inputs/outputs

Thanks!

Answer 1

$broadcast sends messages down through the scope(s), where as $emit sends messages upward through the scope(s).

Failing that you could use 2-way binding on your directives.

So you would have;

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;
        }
    }
});

Then your HTML would be;

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

Something like that. I'm in a rush so it's a rough outline of the code . The premise behind it is to basically use 2 way/1 way binding so you can pass down functionality from your parent controllers/directives.