Angular Directive

by jacobwsmith

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/jquery-ui.css">
<!-- <input id="temp" type="text"> -->
<div ng-controller="MainCtrl">
    <hr>
    <p>
        <select ng-disabled="check" ng-model="userId" ng-required="true" ng-click="userClicked('YEP1')" ng-change="userChanged('YEP1')" ng-options="u.value as u.label for u in userList"></select> {{userId}}
        <input type="checkbox" ng-model="check"> Disable
    </p>
    <br>
    <auto ui-disabled="check" ui-required="true" ui-model="userId" ui-click="userClicked('YEP2');" ui-change="userChanged('YEP2');" ui-options="userList"></auto>
    <!-- <br> - Click: {{click}}
        <br> - Change: {{change}}
    
<!-- Account Test -->
        <!--
    <auto ui-required="true" ui-model="accountId" ui-click="userClicked('YEP2');" ui-change="userChanged('YEP2');" ui-options="accountList"></auto>{{accountId}}</div>
-->

CSS

.some {
    border: 1px solid #cacaca;
    padding: 10px;
}
.ng-invalid {
    background-color: #FFF999;
}
.test {
    border: 3px solid green;
}

JavaScript

// ===========================================
// App
// ===========================================
var app = angular.module('myapp', []);
// ===========================================
// Controller
// ===========================================
app.controller('MainCtrl', function ($scope, $timeout) {
    // ACCOUNTs --------------------------
    /*
    $scope.accountId = '4';
    $scope.accountList = [{
        value: '1',
        label: 'Acme'
    }, {
        value: '2',
        label: 'Micro'
    }, {
        value: '3',
        label: 'GoGal'
    }]
    */
    // USERs --------------------------
    //$scope.userId = '';
    //$scope.userList = [];
    
    //$timeout(function() {
        //console.log('Timeout is working');
        $scope.userId = '2'
        $scope.userList = [{
            value: '1',
            label: 'John Doe'
        }, {
            value: '2',
            label: 'Larry Doe'
        }, {
            value: '3',
            label: 'Sarah Doe'
        }];
    //}, 3000);
    
    // CLICKs --------------------------
    $scope.userClicked = function (v) {
        console.log('userClick');
        $scope.updateClick(v);
    }
    $scope.click = 'Nope';
    $scope.updateClick = function (str) {
        $scope.click = str;
    }

    // CHANGE --------------------------
    $scope.userChanged = function (v) {
        console.log('userChange');
        $scope.updateChange(v);
    }
    $scope.change = 'Nope';
    $scope.updateChange = function (str) {
        $scope.change = str;
    }
});
// ===========================================
// Directive
// ===========================================
app.directive('auto', function ($timeout) {
    return {
        restrict: 'E',
        scope: {
            uiModel: '=',
            uiChange: '=',
            uiClick: '=',
            uiDisabled: '=',
            uiRequired: '=',
            uiOptions: '=',
        },
        template: function (element, attrs) {
            var tmp = '<span...