Angular Directive Test (jQuery Button)

by Bacher

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/start/jquery-ui.css">
<div ng-app="jqButtonTest" ng-controller="jqButtonTestController">
    <div>
        <input id="buttonDisabled" type="checkbox" ng-model="buttonDisabled" />
        <label for="buttonDisabled">Disable Button</label>
        <br/>
        <label for="buttonText">Button Text:</label>
        <input id="buttonText" type="text" ng-model="buttonTitle" />

        <b>Directive jQuery UI Button</b>
        <jq-button ng-click="test(4)" ng-disabled="buttonDisabled" text="buttonTitle">{{buttonTitle}} xxx</jq-button>
        <br/>
    </div>
</div>

CSS

b {
    display: block;
    margin: 15px 0 5px 0;
}

JavaScript

// creative the directives as re-usable components
angular
    .module('Components', [])
    .directive('jqButton', function () {
        return {
            restrict: 'E',
            replace: true,
            template: '<button></button>',
            scope: {
                'ngClick':    '&',
                'ngDisabled': '=',
                'text':       '='
            },
            link: function (scope, element, attrs) {
                element.button();

                scope.$watch('text', function (value) {
                    element.button('option', 'label', value);
                });
                
                scope.$watch('ngDisabled', function (value) {
                    element.attr('disabled', value);

                    if (value) {
                        element.button('disable');
                    }
                    else {
                        element.button('enable');
                    }
                });
            }
        };
    });

// create my controller
angular
    .module('jqButtonTest', ['Components'])
    .controller('jqButtonTestController', function ($scope, $http) {
        $scope.buttonDisabled = false;
        $scope.buttonTitle = 'test button';

        $scope.test = function (i) {
            alert('you clicked button #' + i);
        }
});