AngularJS在ng-click上调用自定义指令（A表格）

Question

新增角度。我有一个自定义指令，它基本上是一个表单，当单击相册中的某个轨道时发生点击事件时，我想要调用该表单。事情是这样的：

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

所以，当我点击Album1，我将是album1显示曲目。当我点击album2时，我将显示album2的曲目而不是album1。现在，当我点击专辑2的曲目时，我想要显示表单（定义为自定义指令）。事情是这样的：

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

这里是我的代码：

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

控制器：

(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); 
    } 
} 


})(); 

定制directive.js

(function(){ 

'use strict'; 

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

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


})(); 

元数据form.html文件：

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

任何想法如何实现这一目标？

Answer 1

首先，我认为你的自定义指令不应该使用与你的第一个代码相同的控制器。在metadataForm中删除ngController指令。

使用数据绑定来获得跟踪信息时，该指令被称为：

(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 
    } 
    }; 
})(); 

你必须改变在metadataForm模板中的NG-模型与您的控制器将数据绑定您的数据。

为了使metadataForm指令出现在点击，你可以使用ng-if指令：

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

和Controller你描述：

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