How to have data synced between directive controller and parent scope

Question

I know that this probably have been answered several times, and it might even be pointed out in Angular documentation, but I can't for my life understand how to do this 'correct'.

I have a directive that list items in a table with user defined objects. I want the items to be synced between the directive and the scope it resides in (for example if items are added or removed from the parent scope, I want the list to be updated accordingly. The same goes the other way around; if items are selected in the list, I want the parent to know this.) At the end, I want it to be shared memory, so that the data just 'works', without $watch, $apply & $dispatch, if that is possible.

I thought I could do it like this:

Directive:

{
  restrict: 'E',
  templateUrl: 'js/components/selectionList/component.selectionList.html',
  controller: 'SelectionlistCtrl',
  controllerAs: 'selecListCtrl',
  scope: {
    items: '='
  },
  link:  (scope, element, attrs) => {
    scope.selecListCtrl.items = scope.items;
  }
}

HTML:

<selection-list items="vm.items" />

vm is the controller in the parent scope, and items is an array of objects. This kinda works, but as soon as I leave the view that contains the selection-list directive, the list items are not re-loaded when I enter the view again (this is probably because link(...) function only runs once and the directive is then cached).

I can ensure that the view and directive aren't cached, and then it works. But it must be a better way to do this? Or am I out of luck?

Consider using angular 1.5 components. You can easily achive desired behaviour with bindings. — Kasper Ziemianek, Jan 02 '17 at 16:08
Do what @Claies said. For more information see, [AngularJS Comprehensive Directive API Reference - bindToController](https://docs.angularjs.org/api/ng/service/$compile#-bindtocontroller-) — georgeawg, Jan 03 '17 at 08:22

score 0 · Answer 1 · edited May 23 '17 at 10:30

asolution that does not use apply, watch, ... is in this thread AngularJS: Parent scope is not updated in directive (with isolated scope) two way binding It is in the answer below the accepted answer, i copied it here

angular.module('app')
.directive('navbar', function () {
    return {
        templateUrl: '../../views/navbar.html',
        replace: 'true',
        restrict: 'E',
        scope: {
            email: '='
        },
        link: function (scope, elem, attrs) {
            scope.$on('userLoggedIn', function (event, args) {
                scope.email = args.email;
            });
            scope.$on('userLoggedOut', function (event) {
                scope.email = false;
                console.log(newValue);

            });

        }
    }
});

and $rootScope.$broadcast('userLoggedIn', user); to emit the events in the controller

more information on .$emit and .$on is in Working with $scope.$emit and $scope.$on

this is also interesting: https://blog.umur.io/2013/07/02/angularjs-directives-using-isolated-scope-with-attributes/

maybe

$route.reload()

(inject $route into controller)

does also work

see How can I tell AngularJS to "refresh"

How to have data synced between directive controller and parent scope

1 Answers1