Manipulating expressions in AngularJS

Question

I want to be able to achieve a functionality similar to the following:

HTML

<mydir> {{config = {type: 'X', options: 'y'}} </mydir>
<mydir> {{config = {type: 'a', options: 'b'}} </mydir>

JS Directive

angular
  .module('mymod', ['dependency'])
  .controller('myCtrl', function($scope){
     this.config = config;
     this.type = config.type;
     this.options = config.options
  });
  .directive('mydir', function($compile, $window){
     return{
     ... code
     template: 
         `<textarea type=this.type options=this.options> </textarea>
     }
  });

The goal would be to be able to pass a variety of configurations through, to the controller and let the directive take care of the templating. So that way I can pass whatever combinations of configurations through and the directive should handle it.

Not sure if it's possible to achieve this in Angular since I just got into it but hopefully it isn't too complicated.

Answer 1

If your goal is to pass a configuration parameter to your directive you can do it through the isolated scope of your directive. So that you can pass whatever configuration you like to your directive to handle it.

The following snippet implements this solution.

angular
  .module('mymod', ['dependency'])
  .controller('myCtrl', function($scope) {
    this.config = {
      type: 'a',
      options: 'b'
    };
  })
  .directive('mydir', function($compile, $window) {
    return {
      scope: {
        config: '='
      },
      template: `
        <textarea type="{{ config.type }}" options="{{ config.options }}">
        </textarea>
      `
    }
  });

<mydir config="{type: 'X', options: 'y'}"></mydir>
<mydir config="$ctrl.config"></mydir>