Using directives in AngularJS

Question

I'm trying to learn AngularJS and have one question/concept I'm struggling to understand.

Take the following demo code I created:

js

var app = angular.module('customerPortalApp', ["ui.router"]);

app.config( function($stateProvider, $urlRouterProvider){

      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("/route1");

     $stateProvider
        .state('route1', {
            url: "/route1",
            templateUrl: "/static/html/partials/_campaign_title.html",
            controller: "CampaignCtrl"
        })

});



app.controller("CampaignCtrl", function($scope){

     $scope.loadCampaign = function(){
        alert("loaded campaign!")
    }

});

app.directive("campaign", function() {

    var MessageBox = angular.element('<div class="alert alert-success">hello</div>');

    var link = function (scope, element){
                 scope.loadCampaign();
            }


    return {
        restrict: "E",
        compile: function (template){
            template.append(MessageBox)

            return link

        }


    }


});

html

<div class="container" ng-app="customerPortalApp">

  <div class="row">
    <div class="span12">
      <div class="well" ui-view></div>
    </div>
  </div>


     <div ng-controller="CampaignCtrl">
        <campaign>
            test
        </campaign>
    </div>
</div>

Looking at this code I call the controller in my config and the new $stateProvider I added now takes care of the template loading, so why do I now need directive? In my example I don't now know why I would need one, can ui-view be used to house more controllers?

Answer 1

For your example, you can to use a ui-view. In general, I used directives for a reusable and specified behavior.

What are Directives? At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngView. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.

See the documentation: Angular JS Documentation

A example below as I used the directives:

/* Get the boolean data and switch true or false for respective images. This Example use the bootstrap to show images */
App.directive('bool2image', function() {
    return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: { boolean: '@boolean' },
        template:   '<div ng-switch on="boolean">' +
                        '<div ng-switch-when="false"><span><i class=icon-remove></i></span></div>' +
                        '<div ng-switch-when="true"><span><i class=icon-ok></i></span></div>' +
                    '</div>'
    }
});

So, to used the directive called into the code:

<div class="bool2image" boolean="{{booleanData}}"></div>

I hope to help you.