如何将不同范围从一个控制器绑定到另一个控制器？

Question

我有一个在两个地方使用的控制器：ng-view 和 ng-include。这些地方彼此不是 child 或 parent，但我想在 ng-view 中所做的一些更改也会影响 ng-include。我该怎么做？

下面是 plunker 这些部分的代码。

我想在单击 "Edit user" 时，table 中的 user.userName 显示在弹出窗口中。

index.html

<body>
    <div ng-view></div>
    <div ng-include="'edit-user.html'"></div>

    <script src="app.js"></script>
    <script src="UsersController.js"></script>
  </body>

app.js

var app = angular.module('myApp', ['ngRoute', 'ui.materialize'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'users.html',
                controller: 'UsersController'
            })
            .otherwise({redirectTo: '/'});
    }]);

users.html

<h4>Users</h4>
<table class="striped highlight">
    <thead>
        <tr>
            <th data-field="displayName">Display Name</th>
            <th data-field="userName">User Name</th>
            <th data-field="registered">Registered</th>
            <th data-field="updated">Updated</th>
            <th data-field="email">Email</th>
            <th data-field="authority">Authority</th>
            <th data-field="edit">Edit</th>
        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="user in users">
            <td ng-bind="user.displayName"></td>
            <td ng-bind="user.userName"></td>
            <td ng-bind="user.registered"></td>
            <td ng-bind="user.updated"></td>
            <td ng-bind="user.email"></td>
            <td ng-bind="user.authority"></td>
            <td><a class="collection-item waves-effect waves-teal" modal open="openModal" ng-click="openModalFunc(user)">Edit user</a></td>
        </tr>
    </tbody>
</table>
<a data-target="edit-user" class="hide" modal open="openModal">Edit user</a>

UsersController.js

app.controller('UsersController', ['$scope', function($scope) {
    // create fake users
    $scope.users = [
        {
            displayName: 'Alexander',
            registered: '02-07-2017',
            updated: '02-07-2017',
            email: 'alex@gmail.com',
            authority: 'admin',
            userName: 'Alex'
        },
        {
            displayName: 'Lev',
            registered: '02-07-2017',
            updated: '02-07-2017',
            email: 'lev@gmail.com',
            authority: 'guest',
            userName: 'Lev'
        }
    ]

  $scope.openModal = false;

    $scope.openModalFunc = function(user) {
        $scope.openModal = true;
        $scope.selectedUser = user;
        Materialize.toast('Awesome, we did it!', 4000);
    }
}]);

edit-user.html

<div id="edit-user" class="modal col l3" ng-controller="UsersController">
    <div class="modal-content">
        <h4>{{selectedUser.userName}}</h4>
    </div>
    <div class="modal-footer">
        <a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

Answer 1

如果它不是很大的应用程序，那么您可以从一个控制器使用 $broadcast 并使用 $on 捕获它。您可以找到更多信息 here.

Answer 2

我发现更好的解决方案是将需要共享的数据移动到上层通用范围。

如何将不同范围从一个控制器绑定到另一个控制器？

How to bind different scopes from one controller to the one?

angularjs

angularjs-scope

angularjs-ng-include

ng-view

ng-controller