Question

我正在尝试从我的代码中找出两个自定义指令，但它们都没有在我的页面中呈现。相关的代码片段是：

（1）circular-checkbox-template.html ----＆gt;模板HTML

<div class="mlm-circular-checkbox clearfix">
<div class="roundedOne">
  <input type="checkbox"/>
  <label for="roundedOne"></label>
</div>

（2）mlm-checkbox-circular.js ----＆gt;指令

angular.module('mlmApp')
   .directive('mlmCheckboxCircular', function() {
            return {
                template: 'views/circular-checkbox-template.html',
                restrict: 'E',
                transclude: false,
                /*
                scope: {
                    params: '=checkboxParams'
                },
                */
                link:function(scope, element, attrs) {

                }
            }
        });

（3）我试图使用自定义指令的HTML文件：

...
<td data-title="'Included'" style="text-align: center">
                        <input type="checkbox" ng-checked="{{report.reportData.isEntitled}}"></input>
                        <mlm-checkbox-circular></mlm-checkbox-circular> ----> First checkbox
                    </td>
                    <td data-title="'Compelling'" style="text-align: center">
                        <input type="checkbox" ng-checked="{{report.reportData.isShownAsCompellingEvent}}"></input>
                        <mlm-checkbox-circular></mlm-checkbox-circular> ----> Second checkbox
                    </td>
...

到目前为止，这两个复选框都没有出现在我的屏幕上。

为了进一步检查，我参与了一个JSFiddle http://jsfiddle.net/9Ymvt/2943/ 在这里，我正在研究两种不同类型的自定义指令，这也是我在页面中所需要的。但只有一个出现。如果我删除其中一个自定义指令，则会出现左边的指令。你能帮我弄清楚这是怎么运作的，我做错了什么？

Answer 1

请参阅此处http://jsfiddle.net/9Ymvt/2944/

你有两个'组件'模块的定义

angular.module('components', [])
    .directive('mlmCheckboxSemiCircular', function () {

                return {
                    restrict: 'E',
                    transclude: false,
                    template: '<div style="padding: 5px 5px 5px 5px"><div class="roundedOneSemi"><input type="checkbox"  value="None" id="roundedOne" name="check" /><label for="roundedOne" class="semi"></label></div></div>'
                }

    });


angular.module('components')
    .directive('mlmCheckboxCircular', function () {

                return {
                    restrict: 'E',
                    transclude: false,
                    template: '<div style="padding: 5px 5px 5px 5px"><div class="roundedOne"><input type="checkbox"/><label for="roundedOne"></label></div></div>'
                }

    });
angular.module('HelloApp', ['components'])

多个自定义指令angularjs

1 个答案: