Question

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

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中实现这一点，因为我刚刚进入它，但希望它不是太复杂。

Answer 1

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

以下代码段实现了此解决方案。

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>

在AngularJS

1 个答案: