Question

如何在AngularJS中为小部件添加复选框？

我的一个网页上显示了一个小部件 - 当警报被提升时，小部件当前会显示几个警报（即，当这些变量达到某个值时，它会观察几个变量的值），警报被引发，并显示在小部件上。

我现在要做的是在窗口小部件中添加一个复选框，以切换是否应在窗口小部件上显示警报。小部件的HTML是：

<div data-ng-if="widget.name === 'umw-tag-box'">
    <div class="divider"></div>
    <div class="row">
        <div class="form-horizontal">
            <label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
            <div class="col-sm-8">
                <tags-input max-tags="1"
                            min-length="1"
                            key-property="tag"
                            display-property="tag"
                            template="tagItem.html"
                            um-max-tags-strict="true"
                            data-ng-model="widget.tag"
                            placeholder="Start typing a tag name"
                            replace-spaces-with-dashes="false"
                            on-tag-adding="onAddingTagItem($tag)"
                            on-tag-added="warning.tag = undefined"
                            um-tags-input-warning="{{warning.tag}}"
                            data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
                    <auto-complete min-length="1"
                                   load-on-focus="true"
                                   load-on-empty="true"
                                   display-property="tag"
                                   template="autocomplete.html"
                                   source="autocompleteTagsFilter($query)">
                    </auto-complete>
                </tags-input>
            </div>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row">
        <div class="form-horizontal">
            <label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
            <div class="col-sm-8">
                <um-color-picker color="widget.color"></um-color-picker>
            </div>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row">
        <div class="form-horizontal">
            <label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
            <div class="col-sm-8 ">
                <um-icon-picker icon="widget.icon"></um-icon-picker>
            </div>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row ui-checkbox-row">
        <label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
        <div class="col-sm-8 col-xs-6">
            <label class="ui-checkbox">
                <input type="checkbox" ng-model="widget.flip">
                <span></span>
            </label>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row" ul-scroll-modal-to-me="focusDesc">
        <div class="form-horizontal">
            <label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
            <div class="col-sm-8">
                <input type="text" class="form-control input-sm" ng-model="widget.description"
                       data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
            </div>
        </div>
    </div>
</div>

在小部件HTML中，已经出现了一个复选框的标记，但我实际上无法在页面上看到它...

<div class="row ui-checkbox-row">

我尝试在umw-tag-box div中添加一个类似的行，并在div下面几个级别，但无论我放在哪里都无法显示复选框... < / p>

向窗口小部件添加复选框的最佳方法是什么？

修改

我尝试在JS中的link函数中添加一个函数，该函数会在页面上添加/显示复选框，但这似乎并没有对所显示的内容产生影响。在浏览器中：

.directive('umwTagBox', function($timeout, fxTag, umColorFilter){
    return {
        ...
        template: ...
            ...
        link: function($scope, $element){
            ...
            var setTagValue = function(tag){
                ...
                //This is the code I added:
                angular.module('showAlarmsCheckbox', [])
                    .controller('alarmsController', ['$scope', function($scope){
                        $scope.checkBoxMode1 = {
                            value1 : true,
                            value2 : 'YES'
                        };
                    }]);
                ...
            };
            ...
        }
    }
})

我在这里遗失了什么/我做错了什么？

AngularJS - 为小部件添加一个复选框

0 个答案: