复选框指令在角 [英] Checkbox Directive in angular

问题描述

我要创建一个复选框，输入指令，这种结构：

 ＆LT;标签=sameID级=风格＆GT;
  ＆LT;输入类型=复选框ID =sameIDNAME =名/＆GT;
  ＆LT;跨度＆gt;此处的一些文字＆lt; / SPAN＆GT;
＆LT; /标签＆gt;
 

而把简单的标签如＆LT;＆复选框GT;＆LT; /复选框＆GT; 在我的HTML。
这个指令应该处理检查事件对我来说。我可以检查，如果该复选框选中与否在code。

下面是我的js code时，尝试创建这个指令：

  app.directive（复选框功能（$编译）{  VAR检查={{检查}};
  如果（检查==真）{
    VAR inputCheck ='＆LT;输入类=复选框选中类型=复选框NG变化=器isChecked（）NAME ={{为}}ID ={{为}}/＆GT;';
  }其他{
    VAR inputCheck ='＆LT;输入类=复选框NG变化=器isChecked（）类型=复选框NAME ={{为}}ID ={{为}}/＆GT;';
  }
  变种临时='＆LT;标签={{为}}级=你好＆GT;'+ inputCheck +'＆LT; SVG WIDTH =100％V- pressable ID =checkboxsvgHEIGHT = 100％视框=0 0 23 23版本=1.1的xmlns =http://www.w3.org/2000/svg的xmlns：XLink的=http://www.w3.org/1999/ XLink的XML：空间=preserve＆GT;'+'＆LT克变换=矩阵（1,0,0,1，-262.373，-219.494）＆GT;'+'＆LT克ID = 复选框背景改造=矩阵（1,0,0,1,73.0395,6.16767）＆GT;＆LT;路径D =M211.114,216.192C211.114,215.089 210.218,214.192 209.114,214.192L192.199,214.192C191.095,214.192 190.199 ，215.089 190.199,216.192L190.199,233.107C190.199,234.211 191.095,235.107 192.199,235.107L209.114,235.107C210.​​218,235.107 211.114,234.211 211.114,233.107L211.114,216.192Z/＆GT;＆下/ g取代;＆下克的id =复选框 - 勾选变换=矩阵（1,0,0,1,35.2522,0.0159298）＆GT;＆LT;路径d=\"M234.362,231.155L237.395,234.188L243.299,228.283\"/></g></g></svg><span>{{p}}</span></label>';  返回{
    限制：E，
    模板：温度，
    范围 ： {}，
    链接：功能（范围，元素，ATTRS，CTRL）{      scope.type = attrs.type;
      scope.p = attrs.p;
      scope.for = attrs.for;
      scope.check = attrs.check;      scope.isChecked =功能（）{
        的console.log（选中）;
      }
    }
  };
}）;
 

我怎样才能做到这一点？

解决方案

请检查了这一点。

\r

\r

VAR jimApp = angular.module（mainApp，[]）;\r
\r
jimApp.controller（'mainCtrl'，函数（$范围）{\r
}）\r
.directive（复选框功能（）{\r
    返回{\r
        限制：E，\r
        要求：'ngModel'，\r
        适用范围：{名称：@，ngModel：=}，\r
        模板：＆LT;标签类='风格'＆GT;＆LT;输入类型=复选框名称='名'NG-模式='ngModel/＆GT;＆LT;跨度＆GT; {{名}}＆LT; / SPAN＆GT; ＆LT; /标签＆gt;\r
    };\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=mainAppNG控制器=mainCtrl＆GT;\r
  ＆LT;复选框名称=这里一些文本NG模型=值＆GT;＆LT; /复选框＆GT;\r
  {{值}}\r
＆LT; / DIV＆GT;

\r

\r

\r

I want create directive for checkbox input with this structure:

<label for="sameID" class="style">
  <input type="checkbox" id="sameID" name="name" />
  <span>some text here</span>
</label>

And the put the simple tag like <checkbox></checkbox> in my html. and this directive should handle checked event for me. And i can check if this checkbox checked or not in code.

Here is my js code when try create this directive:

app.directive("checkbox", function($compile){

  var check = "{{check}}";
  if (check == true) {
    var inputCheck = '<input class="checkbox" checked type="checkbox" ng-change="isChecked()" name="{{for}}" id="{{for}}" />';
  } else {
    var inputCheck = '<input class="checkbox" ng-change="isChecked()" type="checkbox" name="{{for}}" id="{{for}}" />';
  }
  var temp = '<label for="{{for}}" class="hello">'+inputCheck+' <svg width="100%" v-pressable id="checkboxsvg" height="100%" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">'+'<g transform="matrix(1,0,0,1,-262.373,-219.494)">'+'<g id="checkbox-background" transform="matrix(1,0,0,1,73.0395,6.16767)"><path d="M211.114,216.192C211.114,215.089 210.218,214.192 209.114,214.192L192.199,214.192C191.095,214.192 190.199,215.089 190.199,216.192L190.199,233.107C190.199,234.211 191.095,235.107 192.199,235.107L209.114,235.107C210.218,235.107 211.114,234.211 211.114,233.107L211.114,216.192Z"/></g><g id="checkbox-check" transform="matrix(1,0,0,1,35.2522,0.0159298)"><path  d="M234.362,231.155L237.395,234.188L243.299,228.283"/></g></g></svg><span>{{p}}</span></label>';

  return {
    restrict: "E",
    template : temp,
    scope : {},
    link : function(scope, element, attrs, ctrl){

      scope.type = attrs.type;
      scope.p = attrs.p;
      scope.for = attrs.for;
      scope.check = attrs.check;

      scope.isChecked = function() {
        console.log("checked");
      }
    }
  };
});

How i can do that?

解决方案

Pls check this out

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
})
.directive("checkbox", function() {
    return {
        restrict : "E",
        require: 'ngModel',
        scope:{ name:"@" , ngModel:"=" },
        template : "<label class='style'><input type='checkbox' name='name' ng-model='ngModel' /><span>{{name}}</span></label>"
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <checkbox name="some text here" ng-model="value" ></checkbox>
  {{value}}
</div>

这篇关于复选框指令在角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！