Search code examples
angularjsangularjs-scopeangularjs-ng-includeng-viewng-controller

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

I have a controller that I use in two places: in a ng-view and in a ng-include. These places are not child or parent to each other, but I want to some changes made in the ng-view affect to ng-include as well. How can I do that?

Here is plunker with these parts of code.

I want to when "Edit user" is clicked the user.userName from the table shows in the popup.

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: '[email protected]',
            authority: 'admin',
            userName: 'Alex'
        },
        {
            displayName: 'Lev',
            registered: '02-07-2017',
            updated: '02-07-2017',
            email: '[email protected]',
            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>
Solution

  • I've found that better solution is to move your data that need to be shared into the upper general scope.