AngularJS 1.5 - How to Set Two Way Bindings on Component AngularJS 1.5 - How to Set Two Way Bindings on Component angularjs angularjs

AngularJS 1.5 - How to Set Two Way Bindings on Component


You need to pass the value from the directive into the component:

<my-view passed-var='ctrl.passedVar'></my-view>

and in the component:

myApp.component('myView', {    templateUrl: '/path/to/view',    bindings: {        passedVar: '='    },    controller: function () {      var vm = this;      console.log(vm.passedVar);    }});

then you will be able to access in the component as in the example

There are a few other ways to do it, such as using a service to handle the information or using require which would give your component access to the controller of the directive. You can find the above method and others here: https://docs.angularjs.org/guide/component.


I had to explicitly state the variable I wanted to bind:

myApp.component('myView', {    templateUrl: '/path/to/view',    bindings: {        controllerVariable: '@'    }});

Also, since controllerVariable is a string, I had to use the @ sign binding.