AngularJS call custom directive (A form) on ng-click

Question

New to angular. I have a custom directive which basically is a form that I want to call when a click event happens when a track within an album is clicked. Something like this:

- album1  
   *album1-track1
   *album1-track2
- album2

So when I click Album1, I will be displaying tracks for album1. When I click album2, I will display tracks of album2 and not for album1. Now, when I click on track of album 2, I want to display the form (which is defined as a custom directive). Something like this:

 - album1  
   *album1-track1  ---> (this track clicked) -----> (form displayed)
   *album1-track2
- album2

Here is my code:

// HTML
<div class="wrapper wrapper-content">
<div>
    <ul>
        <li ng-repeat="album in vm.albums">
            <a ng-click="vm.getAlbumTracks(album, $index)">{{album}}</a>
            <ul ng-show="$index === vm.showingAlbumIndex">
                <li ng-repeat="track in vm.albums.tracks"><a ng-click="vm.displayForm(track)">{{track}}</a></li>
            </ul>
        </li>
    </ul>
    <metadata-form></metadata-form>
    <a ng-click="vm.newFunction('RAVI')">Click Me!</a>
</div>

Controller:

(function (){

angular.module('app.fileUploadForm').controller('FileUploadFormController', FileUploadFormController);

FileUploadFormController.$inject = ['$http', '$log', '$scope', '$state', '$rootScope', 'APP_CONFIG'];
function FileUploadFormController ($http, $log, $scope, $state, $rootScope, APP_CONFIG){

    var vm = this;
    vm.albums = init;
    vm.getAlbumTracks = getAlbumTracks;
    vm.newFunction = newFunction;
    vm.displayForm = displayForm;

    return init();

    function init(){

        $http.get('http://localhost:8080/api/albums').then(function(responseData){
            // Parse the json data here and display it in the UI
            vm.albums = [];
            for(var album in responseData.data)
                $scope.vm.albums.push(album);
            $log.debug(angular.toJson(responseData, true));
        })
    }

    function getAlbumTracks(album, index){
        $http.get('http://localhost:8080/api/albums/'+album).success(function(trackResponse){
            //parse each album and get the track list
            //alert('Function getAlbumTracks () called');
            vm.showingAlbumIndex = index;
            vm.albums.tracks = [];

            for(var i = 0; i<trackResponse.tracks.length; i++)
                vm.albums.tracks.push(trackResponse.tracks[i].title);
            $log.debug(vm.albums.tracks);
        })
    }


    function displayForm(track, index){
        // display the form for that track only
    }

    function newFunction(name){
        $log.debug("Hello " + name);
    }
}


})();

Custom directive.js

(function (){

'use strict';

angular.module('app.fileUploadForm').directive('metadataForm', metadataForm);

function metadataForm(){
    return {
        restrict: 'EA',
        templateUrl: 'app/fileUploadForm/metadata-form.html'
    };
};


})();

metadata-form.html file:

<div ng-show="showForm">
<form name="uploadForm" ng-controller="FileUploadFormController as uploadCtrl">
    <br>UPC:<br>
    <input type="text" ng-model="UPC">
    <br>
    <br>Artist:<br>
    <input type="text" ng-model="artist">
    <br>
    <br>Genre:<br>
    <input type="text" ng-model="genre">
    <br>
    <br>Album:<br>
    <input type="text" ng-model="album">
    <br>
    <br>Hold Date:<br>
    <input type="text" ng-model="holddate">
    <br>
    <br>SomeField:<br>
    <input type="text" ng-model="somefield">
</form>
<!-- trying the date picker here
        <h4>Standard date-picker</h4>
        <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
--><br>
<button class="btn btn-primary block m-b" ng-click="uploadFile()">Send to Ingestion</button>

Any idea how to achieve this ?

Answer 1

To begin with, I think your custom directive shouldn't use the same controller of your first code. Remove ngController directive in metadataForm.

Use data binding to get track information when the directive is called:

(function (){
  'use strict';
  angular.module('app.fileUploadForm').directive('metadataForm', metadataForm);
  function metadataForm(){
    return {
      restrict: 'EA',
      templateUrl: 'app/fileUploadForm/metadata-form.html',
      scope: {}, // Isolated scope
      bindToController: {
        track: '='
      }
      controller: controllerFunc
      controllerAs: 'vm'
    };

    function controllerFunc() {
      var vm = this;
      // Your track is accessible at vm.track
    }
  };
})();

You have to change the ng-model in metadataForm template to bind your data with data from your controller.

To make the metadataForm directive appear on click, you could use ng-ifdirective:

// HTML
<div class="wrapper wrapper-content">
<div>
    <ul>
        <li ng-repeat="album in vm.albums">
            <a ng-click="vm.getAlbumTracks(album, $index)">{{album}}</a>
            <ul ng-show="$index === vm.showingAlbumIndex">
                <li ng-repeat="track in vm.albums.tracks"><a ng-click="vm.displayForm(track)">{{track}}</a></li>
            </ul>
        </li>
    </ul>
    <metadata-form ng-if="vm.isFormDisplayed" track="vm.displayedTrack"></metadata-form>
    <a ng-click="vm.newFunction('RAVI')">Click Me!</a>
</div>

And in the controller you described:

function displayForm(track, index){
  vm.isFormDisplayed = true;
  vm.displayedTrack = track;
}