处理 AngularJS 中的表达式

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 中的表达式

Manipulating expressions in AngularJS

html

angularjs

angularjs-directive

angularjs-controller