CODEWITHSUNDEEP
javascriptangularjsangularjs-directivepartials
Christoffer Bubach
Christoffer Bubach

Reputation: 1686

Angular partial header view

When trying to learn best practices for AngularJS structure I've read in several places that partial views should be implemented as directives so that's what I did for my app header.

Now, for my specific header I have a back button that should only be visible when not on the homepage. After finally getting it to work I'm not sure that I'm happy with my solution. For example it doesn't utilize the controllerAs methodology with var vm = this;, and I would rather not let it have a dedicated scope/controller at all if I could avoid it.

Here's the directive code for my headerView:

(function () {

    'use strict';

    function appHeader () {
        return {
            restrict: 'E',
            templateUrl: 'shared/header/headerView.html',
            controller: function ($scope, $route, $location) {
                $scope.homeUrl = 'start/' + $route.current.params.id;
                $scope.isHomeUrl = function () {
                    if($location.path() == $scope.homeUrl) {
                        return true;
                    }
                    return false;
                };
                $scope.backClick = function() {
                    window.history.back();
                    return false;
                };
            }
        }
    };

    angular.module('myApp').directive('appHeader', appHeader);

})();

What do you think, for my header with backbutton, would you do this in another way? Suggestions?

Upvotes: 0

Views: 283

Answers (1)

Michael
Michael

Reputation: 3426

Angular UI Router would be a better option than directive for your needs.

Have a look at this question, it is very well written and there's a working plunker!

As for the controllerAs methodology, have a look at this stackoverflow question.

Upvotes: 1

Related Questions