1
\$\begingroup\$

In anticipation of the new Angular release and since I've only just begun learning it, I have been developing a project in a directive-oriented way. Below is a sample of a section that handles message posting, and I was wondering how I could improve it using some best practices or conventions that I might have missed.

The directive HTML:

<form id="nieuws-edit-form">
    <label>Title<input type="text" /></label>

    <label>Date
        <input kendo-datetimepicker k-options="news.dtpDateTime_options" />
    </label>

    <label>Language
        <input kendo-dropdownlist k-options="news.ddlLanguage_options" />
    </label>

    <textarea kendo-editor k-options="news.ediMessage_options"></textarea>
    <a id="save">Save</a>
</form>

The directive code:

angular.module('app.news')
.directive('newsEdit', [function () {
    return {
        controller: 'newsController',
        controllerAs: 'news',
        bindToController: true,
        templateUrl: partialPath + 'news-edit.html',
        link: function (scope, element, attrs, ctrl) {
            // call some controller things here to prepare the view
            // like fetching the news item (when editing)
            ctrl.readOne();

            // kendo control option definitions
            ctrl.dtpDateTime_options = {
                interval: 15
            };

            ctrl.ddlLanguage_options = {
                dataSource: { },
                dataTextField: 'Name',
                dataValueField: 'Code',
                value: 'eng'
            };

            ctrl.ediMessage_options = {
                resizable: true,
                tools: ['list', 'of', 'items'],
                imageBrowser: { }
            };
        }
    };
}]);

And finally, my controller:

angular.module('app.news')
.controller('newsController', ['$state', 'NewsService',
    function ($state, $service) {
        var _this = this;

        _this.readOne = readOne;
        _this.params = $state.params;
        _this.item = null;

        function readOne(id) {
            if (id == (null || undefined)) {
                id = _this.params.id;
            }

            if (!isNaN(id) && id >= 0) {
                $service.readOne(id).then(function (response) {
                    _this.item = response;
                });
            }
        }
    }
]);

Now, one of my concerns with this method is that I put a bulk of code in the link function so I can initialize the Kendo UI controls. I know I can specify the options in-line in the HTML tag, but that gets ugly very fast. Once the page has 10+ controls, I'll probably split it up in methods or something. I guess there's not much to do about trimming down the size of the control options.

Which brings me to my next concern: am I even using the link function correctly? Should I be doing the things I do in there in a different place?

\$\endgroup\$
  • \$\begingroup\$ For what it is worth, there is going to be a very large upheaval when it comes to the new Angular2. Any best practices you learn now are unlikely to be transferrable. \$\endgroup\$ – Dan Pantry Dec 4 '15 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.