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>

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

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

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

The directive code:

.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)

            // 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:

.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?

  • \$\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.