I have an AngularJS app within which I want to incorporate UI controls into for styling ui enhancement. I have located all dependencies which load correctly but I am faced with the following question.
How do I apply UI styling to my html control elements using AngularJS directives as currently no styling is seen, I only see plain HTML controls?
Note I have added angular-webix.js to my code and added webix-ui directives to my html tags.
Head Tag
<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" />
Before closing Body Tag (After Angular.js / Before 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'}
];
}
}
});
Template
<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>
I resolved the question by looking at ui.richselect, modifying my directive to read webix-ui="config" with the following template tag as a div not as a select (if using rich select, for example)
Invocation of Config
<div webix-ui="userConfig" name="assignor" placeholder="Assignor" ng-model="assignor" />
Scope Config Object
$scope.userConfig = {
view:"richselect",
label:"Choose",
value:1,
options:$scope.users
}
$scope.users is an array of {id: id, value: 'value'} elements