且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

产生不同的领域取决于angularjs DOM元素

更新时间:2023-02-09 19:51:11

多数民众赞成什么指令是专为,关键是要弄清楚传递和评估领域的那些属性***的方式,在plnkr我犯了一个可能的解决方案。

在这里,你有一个出发点:
PLNKR

\r
\r
  app.directive('cmsInput',函数(){\r
  返回{\r
    限制:'E',\r
    模板:'<标签NG-IF =(存在(标签))> {{标签}}&​​LT; /标签>,\r
    控制器:函数($范围){\r
      $ scope.exists =函数(){\r
        如果(一个或放大器;&放大器;则为a.length大于0){\r
          返回true;\r
        }\r
        返回false;\r
      }\r
    },\r
    链接:功能(范围,ELEM,ATTR){\r
\r
      scope.label = attr.label;\r
      \r
    }\r
    \r
  }\r
  \r
})

\r

\r
\r

它需要的工作,但你会得到点。

编辑:
你可以使用的指令范围字段绑定值,但寻找解决办法的目的,我想让它尽可能明确。

EDIT2:
角指令是与在JavaScript(指令名)规则的驼峰定义为eaxctly驼峰,在HTML中,作为指令调用。

角匹配正确的js code到所谓的指令,准确地把在那个地方在DOM模板。一个链接方法的参数是属性,这些都是你在HTML有相同的价值观,所以在:
attr.label你在HTML获得标签的价值,在这种情况下,字符串头。

指令的模板属性是bindigs变量的范围分别设置和,当我们结合到一起,我们得到的字符串:


  1. 角发现指令

  2. 指令code是被解雇

  3. Link功能是被称为 - 这里面我们设为场名为标签属性的值命名为标签

  4. 模板编译 - 下{{}}标记正确的变量被设置

  5. vio'la - 替代该CMS-input元素你会得到正常的HTML

So i have an application that should take the html of one page which contains different custom directives.

and there is another page which will load the html of the first page and generate input fields according to the number of the custom directive (cms-input) existing in the first page and to the type specified.

so for example here is the first html page

<cms-input type='text' size='14' default='header' label='Header' ></cms:input>

<cms-input type='textfield' size='50' default='paragraph' label='Paragraph'> </cms:input>

the second page should load the first page and generate the fields :

<label>Header</label>
<input type='text' value='header'>
<label>Paragraph</label>
<textarea>paragraph</textarea>

Thats what directives are designed for, point is to figure out best way to pass and evaluate those attributes of fields, in plnkr i made a possible solution.

Here you have a starting point: PLNKR

app.directive('cmsInput', function() {
  return {
    restrict: 'E',
    template: '<label ng-if=(exists(label))>{{label}}</label>',
    controller: function($scope) {
      $scope.exists = function(a) {
        if(a && a.length>0) {
          return true;
        }
        return false;
      }
    },
    link: function(scope, elem, attr) {

      scope.label = attr.label;
      
    }
    
  }
  
})

It requires work, but you'll get the point.

EDIT: You could use 'scope' field of directives to bind values, but for purpose of finding solution I wanted to make it as clear as possible.

EDIT2: Angular directive is being define with a rule "camelCase" in javascript(directive name) is eaxctly "camel-case" in html, as a directive call.

Angular matches correct js code to called directive and puts exactly in that place in DOM your template. One of the parameters of link method are attributes, those are the same values that you have in html, so under: 'attr.label' you get value of 'label' in html, in this case string "header".

The template attribute of directive is a string with bindigs to variables that were set in scope and and when we combine it all together we get:

  1. Angular "finds" a directive
  2. Directive code is being fired
  3. Link function is being called - inside which we set to field named "label" value of attribute named "label"
  4. Template compiles - under {{ }} markers correct variables are being set.
  5. vio'la - in place of this cms-input element you get normal html