指令不生成html

Question

我的代码问题基本上我有这个范围（通过ng-repeat动态创建）

<span my-size id="abc"></span> <span my-size id="def"></span> <span my-size id="ghi"></span>

我需要实现的是获取每个跨度的id并分割其字符并创建复选框并使用split []我得到的时候我将id拆分为其值

<span id="abc">
<input type="checkbox" value="a">
<input type="checkbox" value="b">
<input type="checkbox" value="c">
</span>

<span id="def">
<input type="checkbox" value="d">
<input type="checkbox" value="e">
<input type="checkbox" value="f">
</span>

<span id="ghi">
<input type="checkbox" value="g">
<input type="checkbox" value="h">
<input type="checkbox" value="i">
</span>

任何人都可以帮我在角度js指令中做到这一点

这就是我到目前为止所做的一切：

myApp.directive('mySize', function () {
    return {
    restrict: 'E',
    scope: { html: '@' },
    template: '<span ng-bind-html="html"></span>',
    link : function (scope, element, attrs) {
        scope.html="<h1>sample html </h1>";
    }
  }
});

我不能再进一步了，因为我的指令不会生成html标签

Answer 1

我不确定在编写指令时你的初衷是什么，因为实际上不需要使用链接函数或ng-bind-html。 对于你所要求的，指令可以简单如下：

(function (app, ng) {
  'use strict';

  app.directive('mySize', function () {
    return {
      restrict: 'A',
      scope: { id: '@id' },
      template: '<input type="checkbox" data-ng-repeat="char in id track by $index" value="{{ char }}">'
    }
  });
  
}(angular.module('app', []), angular));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>

<div data-ng-app="app">
  <span data-my-size id="abc"></span>
  <span data-my-size id="def"></span>
  <span data-my-size id="ghi"></span>
</div>

---

修改

如果您想使用模板小提琴添加额外信息。 E.g：

(function (app, ng) {
  'use strict';

  app.directive('mySize', function () {
    return {
      // actually obsolute, because it's the default setting
      restrict: 'A', 
      
      // reusing the directive name to simplify the required view-html,
      // but mapping it to a more fitting name when used internally
      scope: { str: '@mySize' }, 
      
      // the actual template (this time using a label)
      template: '<label data-ng-repeat="char in str track by $index"><input type="checkbox" value="{{ char }}"> {{ char }}</label>'
    }
  });
}(angular.module('app', []), angular));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>

<div data-ng-app="app">
  <div data-my-size="abc"></div>
  <div data-my-size="def"></div>
  <div data-my-size="ghi"></div>
</div>

Answer 2

它不起作用，因为您将其使用限制为元素并将其用作属性。将restrict: 'E'更改为restrict: 'A'。

Answer 3

var app = angular.module('app', []);
app.directive('mySize', function($sce) {
  return {
    restrict: 'EA',
    scope: {
      id: '@'
    },
    template: '<label ng-repeat="i in array"><input type="checkbox" ng-value="i" >{{i}}<label>',
    link: function(scope, element, attrs) {

      scope.array = scope.id.split("")


    }
  }
});
app.controller('homeCtrl', function($scope) {




});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">

    <span my-size id="abc"></span> 
    <span my-size id="def"></span>
    <span my-size id="ghi"></span>

  </div>
</div>

Answer 4

该指令可能如下所示：

.directive('mySize', function() {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            element[0].id.split('').map(function(el) {
                element.append('<label><input type="checkbox" value="' + el + '"> ' + el + '</label>');
            });
        }
    }
});

演示：http://plnkr.co/edit/nZMEdUjMXG3MDYv19H5C?p=preview