我如何保存角指令在范围的变量？ [英] How do I store angular directive in a scope variable?

问题描述

我实施AngularJS形式建设者和需要插入并在运行时重新排序指令。
甚至不知道从哪里开始寻找 - 所有的例子似乎只证明指令的静态树。两个选择实现动态行为是：a）编译和动态插入模板和b）使用的所有可能的指令的巨大纳克开关。这两种方式都是丑陋的。

任何人都可以提出一个更好的实施？

下面是JS和HTML code，因为我是怎么想的formbuilder应该在一个理想的世界，请帮我填TODO的3个实例。

的jsfiddle JavaScript的：

  angular.module（'分量'，[]）
  .directive（复选框，函数（）{
    返回{
      限制：'E'，
      模板：'＆LT; D​​IV CLASS = F＆GT;＆LT;输入类型=复选框＆GT; {{名}}＆LT; /输入＆GT;＆LT; / DIV＆GT;'
    };
  }）
  .directive（'文本框'，函数（）{
    返回{
      限制：'E'，
      模板：'＆LT; D​​IV CLASS = F＆GT;＆LT;输入类型=文本占位符={{名}}＆GT;＆LT; /输入＆GT;＆LT; / DIV＆GT;'
    };
  }）功能FormBuilder（$范围，$区域）{
    $ scope.title ='测试表;
    $ scope.fields = [];
    $ scope.add_checkbox =功能（）{
        的console.log（'添加复选框'）;
        变种字段=无效; // TODO：我如何实例化一个指令？
        $ scope.fields.push（场）;
    };
    $ scope.add_textfield =功能（）{
        的console.log（添加文本字段'）;
        变种字段=无效; // TODO：我如何实例化一个指令？
        $ scope.fields.push（场）;
    };
}
 

HTML

 ＆LT; D​​IV NG-应用=组件NG控制器= FormBuilder＆GT;
    ＆LT;按钮NG：点击=add_checkbox（）＆gt;全新checbox＆LT; /按钮＆GT;
    ＆LT;按钮NG：点击=add_textfield（）＆gt;全新的文本字段＆LT; /按钮＆GT;
    ＆LT; H3＆GT;的{{title}}＆LT; / H3 GT＆;
    ＆LT;＆复选框GT;＆LT; /复选框＆GT;    ＆LT;＆文本框GT;＆LT; /文本框＆GT;    ＆LT; D​​IV NG：重复=田间场＆GT;
        ＆LT;！ -  TODO field.get_html（） - 怎么样？ - ＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

我觉得你有几个方法可以做到这一点，你提到的。既然你不想做一个开关，你可以为每个指令模板文件。即checkbox.html，textfield.html并把该指令中的每个之一。然后用填充您的fields数组['checkbox.html'，'textarea.html'] 当您在循环加你只是简单地＆LT; D​​IV NG-包括='场'＆GT;＆LT; / DIV＆GT;

下面是一个演示： http://plnkr.co/edit/w6n6xpng6rP5WJHDlJ3Y？ p = preVIEW

您还可以创建你的地方在输入型通并将其注射到模板的另一个指令。下面是这方面的一个演示，让您避免申报模板，让指令他们创建基于字段类型：

http://plnkr.co/jhWGuMXZTuSpz8otsVRY

 ＆LT; D​​IV NG：重复=田间场＆GT;
  ＆LT;主字段类型='场'＆GT;＆LT; /主场＆GT;
＆LT; / DIV＆GT;
 

本主场指令只是编译基于字段的值的模板。

  .directive（'masterField'，函数（$编译）{
   返回{
      限制：'E'，
      更换：真实，
      transclude：真实，
      范围：{
         类型：'='
      }，
      模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
      控制器：函数（$范围，$元，$ ATTRS）{}，
      链接：功能（范围，元素，ATTRS）{       element.append（编译$（'＆LT;'+ scope.type +'/＆GT;＆LT; /+ scope.type +'＆GT;'）（范围））;
      }
    };
 }）
 

I am implementing a form builder in AngularJS and need to insert and reorder directives at runtime. Don't even know where to start looking - all examples seem to only demonstrate static tree of directives. Two options to achieve dynamic behaviour are: a) compiling and inserting templates on the fly and b) using huge ng-switch of all possible directives. Both ways are ugly.

Can anyone suggest a better implementation?

Below is JS and html code for how I think formbuilder should look in an ideal world, please help me fill in 3 instances of TODO.

JSFiddle JavaScript:

angular.module('components', [])
  .directive('checkbox', function() {
    return {
      restrict: 'E',
      template: '<div class=f><input type=checkbox>{{name}}</input></div>'
    };
  })
  .directive('textfield', function() {
    return {
      restrict: 'E',
      template: '<div class=f><input type=text placeholder="{{name}}"></input></div>'
    };
  })

function FormBuilder($scope, $locale) {
    $scope.title = 'test form';
    $scope.fields = [];  
    $scope.add_checkbox = function() {
        console.log('adding checkbox');
        var field = null; // TODO: how do I instantiate a directive?
        $scope.fields.push(field);
    };
    $scope.add_textfield = function() {
        console.log('adding textfield');
        var field = null; // TODO: how do I instantiate a directive?
        $scope.fields.push(field);
    };
}

HTML:

<div ng-app=components ng-controller=FormBuilder>
    <button ng:click="add_checkbox()">new checbox</button>
    <button ng:click="add_textfield()">new text field</button>
    <h3>{{ title }}</h3>
    <checkbox></checkbox>

    <textfield></textfield>

    <div ng:repeat="field in fields">
        <!-- TODO field.get_html() - how? -->
    </div>
</div>

解决方案

I think you have a couple ways to do this as you mentioned and since you don't want to do a switch you can create a template file for each directive. ie checkbox.html, textfield.html and put the directive in each one. Then populate your fields array with ['checkbox.html', 'textarea.html'] when you add in your loop you just simply <div ng-include='field'></div>

Here is a demo: http://plnkr.co/edit/w6n6xpng6rP5WJHDlJ3Y?p=preview

You could also create another directive where you pass in the input type and have it inject it into the template. Here is a demo of this which allows you to avoid having to declare templates and letting a directive create them based on the field type:

http://plnkr.co/jhWGuMXZTuSpz8otsVRY

<div ng:repeat="field in fields">
  <master-field type='field'></master-field>
</div>

This master-field directive just compiles a template based on the value of field.

.directive('masterField', function($compile) {
   return {
      restrict: 'E',
      replace:true,
      transclude: true,
      scope:{
         type:'='
      },
      template: '<div></div>',
      controller: function ( $scope, $element, $attrs ) {},
      link: function(scope, element, attrs) {

       element.append( $compile('<' + scope.type+ '/></' +scope.type + '>')(scope) ); 
      }
    };
 })

这篇关于我如何保存角指令在范围的变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！