javascript - AngularJS 在 ng-click 上调用自定义指令(A 表单)

Question

Angular 新手。我有一个自定义指令，它基本上是当单击专辑中的轨道时发生单击事件时我想要调用的表单。像这样的事情:

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

因此，当我单击专辑 1 时，我将显示专辑 1 的轨道。当我单击专辑 2 时，我将显示专辑 2 的轨道，而不是专辑 1 的轨道。现在，当我单击专辑 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>

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


})();

自定义指令.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 文件:

<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

首先，我认为您的自定义指令不应使用与第一个代码相同的 Controller 。删除metadataForm中的ngController指令。

调用指令时使用数据绑定(bind)获取轨迹信息:

(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-model才能将您的数据与 Controller 中的数据绑定(bind)。

要使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;
}