Javascript AngularJS-向小部件添加复选框

如何在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>

---

这里是否有我遗漏的东西/我做错了什么？

ui checkbox row

只是类，您确定html标记在那里吗？不-正如我所提到的，我在页面上的任何地方都看不到复选框，所以我不确定标记的这一部分在做什么。。。只是看起来可能有关系。你知道我将如何在小部件中添加一个复选框吗？你能创建一个plunker/fiddle/snippet吗？这将非常困难，因为有许多不同的文件正在使用。。。

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

.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'
                        };
                    }]);
                ...
            };
            ...
        }
    }
})