AngularJS / Webix UI 集成 - HTML 控制不变

Question

我有一个 AngularJS 应用程序，我想在其中加入 UI 控件以增强样式 ui。我找到了所有正确加载的依赖项，但我面临以下问题。

如何使用 AngularJS 指令将 UI 样式应用到我的 html 控制元素，因为目前看不到任何样式，我只看到普通的 HTML 控件?

请注意，我已将 angular-webix.js 添加到我的代码中，并将 webix-ui 指令添加到我的 html 标签中。

头标

<script src="/app/js/webix-ui/codebase/webix.js" type="text/javascript"></script>
<link rel="stylesheet" href="/app/js/webix-ui/codebase/webix.css" type="text/css" />

关闭正文标签之前（Angular.js之后/app.js之前）

<script src="/app/js/angular-webix/angular-webix.js"></script>

app.js

angular.module('Action', ['ngMaterial', 'webix', 'ngResource', 'Common']);

CreatActionController.js

angular.module('Action').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
  }]).controller('CreateActionController', ['$http', '$resource', '$scope', '$window', '$state', '$timeout', '$sce', 'CommonService', function($http, $resource, $scope, $window, $state, $timeout, $sce, CommonService){
         $scope.actionitem = {
                actionitemid: '',
                title: '',
                status: (this.completiondate) ? 'Open' : 'Completed',
                criticality: '',
                critlevel: '',
                assignor: '',
                owner: '',
                altowner: '',
                approver: '',
                assigneddate: '',
                duedate: '',
                ecd: '',
                completiondate: '',
                closeddate: '',
                actionitemstatement: '',
                closurecriteria: '',
                ownernotes: '',
                approvercomments: '',
                activitylog: ''
        }

        $scope.users = [];
        $scope.owner = {};
        $scope.altowner = {};
        $scope.assignor = {};
        $scope.minDate = null;

        $scope.criticalitylevels = [];   

        $scope.getUsers = function(){
            return $scope.users;  
        };

        $scope.getMinDate = function(){  
            return $scope.minDate;
        }

        $scope.getCrticalities = function(){
            return $scope.criricalitylevels;
        }                       

        $scope.init = function(){    
            CommonService.initTableScrolling(); 
            return $http.get('api/users').then(function(response){
                if (response.data.Succeeded){
                    $scope.users = response.data.Result;
                    return response.data.Result;
                }
                if (!response.data.Succeeded){
                    $scope.msg = $sce.trustAsHtml(response.data.Result);
                }
            }); 
        } 

        $scope.valid = function(){

            alert( $scope.actionitem.assignor != '' &&
                   $scope.actionitem.duedate != '' &&
                   $scope.actionitem.ecd != '' &&
                   $scope.actionitem.criticality != '' &&
                   $scope.actionitem.owner != '' &&
                   $scope.actionitem.altowner != '' &&
                   $scope.actionitemtitle.trim() != '' &&
                   $scope.actionitemstatement.trim() != '' &&
                   $scope.closurecriteria.trim() != '');
        };

        $scope.split = function(str, delimit) {
            var array = str.split(delimit);
            return array;
        }

        $scope.submit = function(){
            $scope.actionitem = JSON.parse(JSON.stringify($scope.actionitem));
            $scope.actionitem.duedate = $scope.split($scope.actionitem.duedate,'T')[0];
            $scope.actionitem.ecd = $scope.split($scope.actionitem.ecd, 'T')[0];
            $scope.actionitem.criticality = $scope.actionitem.critlevel.value;
            $http.post('/api/actionitems', JSON.stringify($scope.actionitem)).then(function (response){
                if (response.data.Succeeded){
                    $scope.msg = response.data.Result;
                }
                else if (!response.data.Succeeded){
                    $scope.msg = $sce.trustAsHtml(response.data.Result);
                }
            });
        }

        $scope.today = new Date()

        this.duedate = new Date();
        this.ecd = new Date();
        this.isOpen = false;

  }]).directive('initData', function(){
          return {
                restrict: 'E',
                link: function (scope, element, attrs) {

                      scope.init();

                      scope.criticalitylevels = 
                      [
                          {'value': 1, 'level': 'High'},
                          {'value': 2, 'level': 'Med'},
                          {'value': 3, 'level': 'Low'},
                          {'value': 4, 'level': 'None'} 
                      ];
                }
          }
});

模板

<div webix-ui type="space" class="container" ng-controller="CreateActionController" layout-padding="" ng-cloak="">
    <div>
    <init-data />
    <form name="CreateActionItem" role="form" ng-submit="CreateActionItem.$valid && submit()" novalidate>
    <div class="row">
      <div class="col-lg-6">
            <label>Assignor</label>
            <select  webix-ui="select" name="assignor" placeholder="Assignor" ng-model="actionitem.assignor" style="min-width: 200px;">
              <option ng-value="assignor.id" ng-model="actionitem.assignor" ng-repeat="assignor in users"
                ng-model-options="{trackBy: 'assignor.id'}">{{assignor.name}}</option>
            </select>
            <div class="msg-container">
              <div ng-if="!actionitem.assignor.trim().length" for="CreateActionItem.assignor.$error" ng-messages="CreateAction.$submitted">
                <div ng-message="required">This is required.</div>
              </div>
            </div>
      </div>
      <div class="col-lg-6">
              <label>Criticality</label>
              <select webix-ui="select" name="criticality" ng-model="actionitem.critlevel" style="min-width: 200px">
                  <option ng-repeat="criticality in criticalitylevels" ng-model-options="{trackBy: 'criticality.level'}"
                    ng-value="criticality">
                    {{criticality.level}}
                  </option>
              </select>
              <div class="msg-container">
                <div ng-if="!actionitem.critlevel" for="CreateActionItem.critlevel.$error" ng-messages="CreateAction.$submitted">
                  <div ng-message="required">This is required.</div>
                </div>
              </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
          <label>Original Due Date</label>
          <div webix-ui="datepicker" name="duedate" value="today" ng-model="actionitem.duedate" min-date="today" placeholder="Enter date" />
           <div class="msg-container">
              <div ng-if="!actionitem.duedate.trim().length" for="CreateActionItem.duedate.$error" ng-messages="CreateAction.$submitted">
                <div ng-message="required">This is required.</div>
              </div>
            </div>
      </div>
      <div class="col-lg-6">
            <label>ECD</label>
            <div webix-ui="datepicker" name="ecd" value="today" ng-model="actionitem.ecd" min-date="today" placeholder="Enter date" />          
             <div class="msg-container">
              <div ng-if="!actionitem.ecd.trim().length" for="CreateActionItem.ecd.$error" ng-messages="CreateAction.$submitted">
                <div ng-message="required">This is required.</div>
              </div>
            </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
            <label>Owner</label>
            <select name="owner" placeholder="Owner" ng-model="actionitem.owner" style="min-width: 200px;">
              <option ng-value="owner.id" ng-model="owner" ng-repeat="owner in users"
                ng-model-options="{trackBy: 'owner.id'}">{{owner.name}}</option>
            </select>
            <div class="msg-container">
              <div ng-if="!actionitem.owner.trim().length" for="CreateActionItem.owner.$error" ng-messages="CreateAction.$submitted">
                <div ng-message="required">This is required.</div>
              </div>
            </div>
      </div>
      <div class="col-lg-6">
            <label>Alt Owner</label>
            <select name="altoowner" placeholder="Alt Owner" ng-model="actionitem.altowner" style="min-width: 200px;">
              <option ng-value="altowner.id" ng-model="actionitem.altowner" ng-repeat="altowner in users"
                ng-model-options="{trackBy: 'altowner.id'}">{{altowner.name}}</option>
            </select>
            <div class="msg-container">
              <div ng-if="!actionitem.altowner.trim().length" for="CreateActionItem.altowner.$error" ng-messages="CreateAction.$submitted">
                <div ng-message="required">This is required.</div>
              </div>
            </div>
      </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <label>Action Item Title</label>
            <input name="title" ng-model="actionitem.actionitemtitle">
            <div class="msg-container">
              <div ng-if="!actionitem.actionitemtitle.trim().length" for="CreateActionItem.actionitemtitle.$error" ng-messages="CreateAction.$submitted">
                <div ng-message="required">This is required.</div>
              </div>
            </div>
        </div>
    </div>
    <div class="row">     
        <div class="col-lg-12">
            <label>Action Item Statement</label>
            <textarea name="statement" ng-model="actionitem.actionitemstatement" maxlength="255" rows="5"
              ></textarea>
            <div class="msg-container">
              <div ng-if="!actionitem.actionitemstatement.trim().length" for="CreateActionItem.actionitemstatement.$error" ng-messages="CreateAction.$submitted">
                <div ng-message="required">This is required.</div>
              </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <label>Closure Criteria</label>
            <textarea name="closurecriteria" ng-model="actionitem.closurecriteria" maxlength="255" rows="5"
              ></textarea>
            <div class="msg-container">
              <div ng-if="!actionitem.closurecriteria.trim().length" for="CreateActionItem.closurecriteria.$error" ng-messages="CreateAction.$submitted">
                <div ng-message="required">This is required.</div>
              </div>
            </div>
        </div>
    </div>            
    <divider></divider>
    <div class="row">
        <div layout="col">
          <!--button class="raised">Button</button-->
          <button type="submit"  class="raised primary">Create Action Item</button>
          <!--button ng-disabled="true" class="raised primary">Disabled</button>
                <button class="raised warn">Warn</button>
                <div class="label">Raised</div-->
        </div>
    </div>
    <div class="row">
      <div class="msg" layout-align="center">
        <message-conainer ng-bind-html="msg">
          {{msg}}
        </message-conainer>
      </div>
    </div>
    </form>
    </div>
</div>

Answer 1

我通过查看 ui.richselect 解决了这个问题，修改我的指令以读取 webix-ui="config" 并将以下模板标记作为 div 而不是a select（例如，如果使用 rich select）

调用配置

<div webix-ui="userConfig" name="assignor" placeholder="Assignor" ng-model="assignor" />

范围配置对象

    $scope.userConfig = {
        view:"richselect",
        label:"Choose", 
        value:1, 
        options:$scope.users
    }

$scope.users 是一个包含 {id: id, value: 'value'} 元素的数组

https://docs.webix.com/api__refs__ui.richselect.html

AngularJS / Webix UI 集成 - HTML 控制不变

AngularJS / Webix UI Integration - HTML controls unchanged

javascript

angularjs

webix