在 AngularJS 中操作表达式答案

【问题标题】：Manipulating expressions in AngularJS在 AngularJS 中操作表达式
【发布时间】：2017-07-06 21:36:36
【问题描述】：

我希望能够实现类似于以下的功能：

HTML

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

JS 指令

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>
     }
  });

目标是能够将各种配置传递给控制器，并让指令处理模板。这样我就可以通过任何配置组合，并且指令应该处理它。

不确定是否有可能在 Angular 中实现这一点，因为我刚开始接触它，但希望它不会太复杂。

【问题讨论】：

标签： html angularjs angularjs-directive angularjs-controller

【解决方案1】：

如果您的目标是将配置参数传递给指令，您可以通过指令的隔离范围来完成。这样你就可以将任何你喜欢的配置传递给你的指令来处理它。

下面的sn-p实现了这个方案。

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>

【讨论】：